Creating two independend Tooltips with different triggers in one chart instance.

[Mijago]

One-line summary [问题简述]

Creating two independend Tooltips with different triggers in ONE chart instance.

Version & Environment [版本及环境]

• ECharts version [ECharts 版本]: 3.3.2
• Browser version [浏览器类型和版本]: Chrome Version 55.0.2883.95 (64-bit)
• OS Version [操作系统类型和版本]: MacOS 10.9.5

Expected behaviour [期望结果]

I need one tooltip for the scatter chart that triggers on item, and one tooltip that triggers on axis (for the second xAxis and yAxis).

The problem: If I add a tooltip that triggers on axis, it fires also in the scatter chart.
Is there any option to limit a tooltip to one axis without splitting the second diagram out of the chart instance (into another)?

ECharts option [ECharts配置项]

// In the Original, there is also a Pie and Sankey chart (in the lower right corner).
// These are not needed for this example.
// But please keep in mind that they also need a tooltip (trigger item)


var grids = [
	{x: "7%", y: "5%", width: "45%", height: "90%"},
	{x: "55%", y: "5%", width: "41%", height: "45%"}
];

var xAxes = [
	{
		"gridIndex": 0,
		"type"     : "value",
		"name"     : "Kasse",
		"min"      : 0
	},
	{
		"type"       : "category",
		"gridIndex"  : 1,
		"boundaryGap": true,
		"name"       : "Datum",
		"axisTick"   : {
			"alignWithLabel": true
		},
		"data"       : []
	}
];

var yAxes = [
	{
		"gridIndex"   : 0,
		"type"        : "value",
		"nameLocation": "end",
		"name"        : "Privat",
		"min"         : 0
	},
	{
		"type"     : "value",
		"gridIndex": 1,
		"name"     : "Anzahl"
	}
];

var toolBox = {
	"show"   : true,
	"orient" : "vertical",
	"feature": {
		"dataZoom"   : {
			"show" : true,
			"title": {
				"zoom": "Zoom",
				"back": "Zurückst."
			}
		},
		"restore"    : {
			"show" : false,
			"title": "Wiederherst."
		},
		"saveAsImage": {
			"show" : true,
			"title": "Speichern"
		},
		"magicType"  : {
			"show" : false,
			"title": {
				"line"  : "Linie",
				"bar"   : "Balken",
				"stack" : "Stapel",
				"tiled" : "Getrennt",
				"force" : "Graph",
				"chord" : "Chord",
				"pie"   : "Kreis",
				"funnel": "Trichter"
			},
			"type" : []
		}
	}
};


var seriesData_scatter = [];
var seriesData_line_kv = [];
var seriesData_line_pk = [];

for (var i = 1; i < 20; i++) {

// Generate sample data: Scatter
	seriesData_scatter.push([
		Math.floor(Math.random() * 20),
		Math.floor(Math.random() * 20),
		i
	]);

	// Generate sample data: Line KV and Line PK
	seriesData_line_kv.push(Math.floor(Math.random() * 20));
	seriesData_line_pk.push(Math.floor(Math.random() * 20));
	// The other two series are just the average lines of the both above and as such not needed in this example.
}


var series = [
	// For the Scatter-Chart
	{
		"type"     : "scatter",
		"itemStyle": {
			"normal": {
				"opacity"      : 1,
				"shadowBlur"   : 2,
				"shadowOffsetX": 0,
				"shadowOffsetY": 0,
				"shadowColor"  : "rgba(0, 0, 0, 1)"
			}
		},
		"data"     : seriesData_scatter
	},
	// For the Line-Chart
	{
		"name"      : "Kasse",
		"data"      : seriesData_line_kv,
		"itemStyle" : {
			"normal": {
				"color": "#B55A00"
			}
		},
		"type"      : "bar",
		"xAxisIndex": 1,
		"yAxisIndex": 1
	},
	{
		"name"      : "Privat",
		"data"      : seriesData_line_pk,
		"itemStyle" : {
			"normal": {
				"color": "#D27E20"
			}
		},
		"type"      : "bar",
		"xAxisIndex": 1,
		"yAxisIndex": 1
	},
	{
		"type"      : "line",
		"smooth"    : "true",
		"name"      : "Durchschnitt (Kasse)",
		"data"      : [],
		"itemStyle" : {
			"normal": {
				"lineStyle": {
					"color": "#832B00"
				}
			}
		},
		"xAxisIndex": 1,
		"yAxisIndex": 1
	},
	{
		"type"      : "line",
		"smooth"    : "true",
		"name"      : "Durchschnitt (Privat)",
		"data"      : [],
		"itemStyle" : {
			"normal": {
				"lineStyle": {
					"color": "#E2B143"
				}
			}
		},
		"xAxisIndex": 1,
		"yAxisIndex": 1
	}
];

var graphic_nodes = {
	"elements": [
		{
			"type"  : "text",
			"left"  : "60%",
			"top"   : "0px",
			"cursor": "default",
			"style" : {
				"text"     : "Some Title",
				"textAlign": "left"
			}
		}
	]
};

var legend = {
	"show"  : true,
	"orient": "horizontal",
	"top"   : "53%",
	"left"  : "55%",
	"data"  : [
		"Kasse",
		"Durchschnitt (Kasse)",
		"Privat",
		"Durchschnitt (Privat)"
	]
};

var dataZoom = {
	"show"      : true,
	"realtime"  : true,
	"start"     : 0,
	"end"       : 100,
	"xAxisIndex": [
		1,
		1
	],
	"gridIndex" : 1,
	"y"         : "51%",
	"height"    : 15
};



var tooltip = {
    // Now, what to do here, that I get one tooltip for each chart?
    // One has to be trigger = item and one has to be trigger = axis
    // Problem: If I use an array of tooltips, both are fired everytime
};

option = {
	animationThreshold     : 200,
	animationDurationUpdate: 250,
	animationDuration      : 1000,
	animation              : true,

	calculable: true,
	stack     : false,

	dataZoom: dataZoom,
	graphic : graphic_nodes,
	legend  : legend,
	toolbox : toolBox,
	grid    : grids,
	xAxis   : xAxes,
	yAxis   : yAxes,
	tooltip : tooltip,
	series  : series
};

Other comments [其他信息]

http://gallery.echartsjs.com/editor.html?c=xHyHQDKmLx&v=1

[100pah]

I've made some modifications in the demo http://gallery.echartsjs.com/editor.html?c=xHyHQDKmLx&v=2, where tooltip settings are added to each series that needs `trigger: 'axis'.
It seems to work, although there is some work to do to improve the trigger behavior.

[100pah]

This feature has been supported in v3.5.

[jbadilla]

How is it supported exactly? How can I use both a tooltip for the axis, as well as a different one when I hover over individual items?

[dileepyelleti]

I also need this behaviour for my line chart to show tooltips with triggers axis(hover on chart) and item(hover on exact point). I am using echars version 4.2.1.
@100pah I don't think this issue was raised for showing different tooltips for different series. It is to show different tooltips one on hover on point, and another on hover any other place.

[yufeng04]

It is not currently supported.