[Feature] Add ability to disable emphasis/highlight functionality of tooltip axis trigger

[juliepagano]

What problem does this feature solve?

It would be really helpful to be able to render the tooltip axis trigger (e.g. a line or a cross) while disabling the highlight/emphasis functionality it triggers on the underlying series. This would probably be a configuration option for tooltip or tooltip.axisPointer.

I created a very simple example where you can see the behavior based on one of the line chart examples.
https://codesandbox.io/s/line-chart-tooltip-highlight-issue-ob1ob0?file=/index.js

When you have a line chart with multiple series, the axis trigger tends to highlight all the series, which is often unhelpful and can be really confusing to users.

If you focus very specifically on a line in this use case, you get a single focus. This behavior is fine.

If you set tooltip.trigger to none, you get more helpful highlight behavior where nothing is highlighted when you're outside a series, but you lose the visual assistance of the axis pointer tracking line to orient yourself within the chart.

A single series is highlighted when you are hovered over it, so that behavior is the same.

I tried a few different combinations of series, tooltip, and axis pointer configuration options to see if I could generate what I wanted with the current functionality, but I could not find a way. It seems like it's currently possible to disable highlight behavior entirely and disable the tooltip axis pointer. I'm hoping for the ability to have only series-level highlight functionality while rendering an axis pointer.

What does the proposed API look like?

This would probably be a configuration option for tooltip and/or tooltip.axisPointer. I do not have strong feelings about the name of the option to trigger this behavior. I see a silent option on some other parts of the API, so maybe having tooltip.axisPointer.silent: true could trigger "render but do not highlight" behavior, but I'm not sure if that would break other tooltip functionality (e.g. showing the tooltip on hover). Maybe a more specific emphasisTrigger or something like that would be more helpful. I'm open to whatever API approach folks with more experience with the internals of the library feel is best.

It looks like the implementation change would probably go hereabouts in the code.

echarts/src/component/axisPointer/axisTrigger.ts

Lines 447 to 495 in f5bb3b0

	function dispatchHighDownActually(
	axesInfo: Dictionary<CollectedAxisInfo>,
	dispatchAction: ExtensionAPI['dispatchAction'],
	api: ExtensionAPI
	) {
	// FIXME
	// highlight status modification should be a stage of main process?
	// (Consider confilct (e.g., legend and axisPointer) and setOption)
	const zr = api.getZr();
	const highDownKey = 'axisPointerLastHighlights' as const;
	const lastHighlights = inner(zr)[highDownKey] || {};
	const newHighlights: Dictionary<BatchItem> = inner(zr)[highDownKey] = {};
	// Update highlight/downplay status according to axisPointer model.
	// Build hash map and remove duplicate incidentally.
	each(axesInfo, function (axisInfo, key) {
	const option = axisInfo.axisPointerModel.option;
	option.status === 'show' && each(option.seriesDataIndices, function (batchItem) {
	const key = batchItem.seriesIndex + ' | ' + batchItem.dataIndex;
	newHighlights[key] = batchItem;
	});
	});
	// Diff.
	const toHighlight: BatchItem[] = [];
	const toDownplay: BatchItem[] = [];
	each(lastHighlights, function (batchItem, key) {
	!newHighlights[key] && toDownplay.push(batchItem);
	});
	each(newHighlights, function (batchItem, key) {
	!lastHighlights[key] && toHighlight.push(batchItem);
	});
	toDownplay.length && api.dispatchAction({
	type: 'downplay',
	escapeConnect: true,
	// Not blur others when highlight in axisPointer.
	notBlur: true,
	batch: toDownplay
	} as DownplayPayload);
	toHighlight.length && api.dispatchAction({
	type: 'highlight',
	escapeConnect: true,
	// Not blur others when highlight in axisPointer.
	notBlur: true,
	batch: toHighlight
	} as HighlightPayload);
	}

[DMOAbove]

You can acheive this by using triggerTooltip: false (and you may want to take a look to into the trigger: "none")

https://codesandbox.io/s/stacked-area-chart-forked-emk9qt?file=/index.js

I still do agree we should have at least a "show" or "silent" to make this more dev friendly (I lost some hours to find a solution)

[juliepagano]

You can acheive this by using triggerTooltip: false (and you may want to take a look to into the trigger: "none")

https://codesandbox.io/s/stacked-area-chart-forked-emk9qt?file=/index.js

I still do agree we should have at least a "show" or "silent" to make this more dev friendly (I lost some hours to find a solution)

I gave that a try in a modified version of my original example, and I'm still seeing similar behavior. Am I doing something slightly wrong in here?

https://codesandbox.io/s/line-chart-tooltip-highlight-issue-trying-with-triggertooltip-false-56elon?file=/index.js

Taking a look at the code a little more, it looks like triggerTooltip only impacts the rendering of the tooltip itself inside axisTrigger, but not the call to the dispatchHighDownActually function, which triggers the highlighting. There's a bunch more complexity inside modelHelper.ts that uses triggerTooltip alongside a bunch of other values that I didn't dig into more deeply, so might be something in there isn't playing nicely?

echarts/src/component/axisPointer/axisTrigger.ts

Lines 345 to 347 in f5bb3b0

	if (!axisInfo.triggerTooltip || !payloadBatch.length) {
	return;
	}

echarts/src/component/axisPointer/axisTrigger.ts

Line 206 in f5bb3b0

dispatchHighDownActually(axesInfo, dispatchAction, api);

[DMOAbove]

I don't see anything wrong on your last example, I tough you wanted to hide the tooltip but keep the highlight dashed line. But I probably misunderstood what you're trying to achieve.

EDIT: If you want to do the inverse, hide the highlight and still see the tooltip, then you need to change the width of the axisPointer: https://codesandbox.io/s/basic-line-chart-forked-lswt8t?file=/index.js

[juliepagano]

I don't see anything wrong on your last example, I tough you wanted to hide the tooltip but keep the highlight dashed line. But I probably misunderstood what you're trying to achieve.

To clarify what I'm hoping to achieve is:

• Show the axis pointer (i.e. the line that follows the mouse pointer to help orient the user).
• Disable the axis pointer from triggering highlight/emphasis behavior.

I think our team has use cases for showing and not showing the tooltip alongside the above behavior.

EDIT: If you want to do the inverse, hide the highlight and still see the tooltip, then you need to change the width of the axisPointer: https://codesandbox.io/s/basic-line-chart-forked-lswt8t?file=/index.js

Making the axis pointer 0 width would make the axis pointer functionally invisible, so not quite what we're looking for.

[juliepagano]

FYI, I'm going to look into making a pull request for this feature.

[Ovilia]

I agree that this should be a useful feature. Glad to see that you made a pull request!