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.