Echarts3 (baidu) colored round in tooltip

Question

Echarts3 (baidu) colored round in tooltip

By default the tooltip has rounds of the same colour as graph, like this:

http://echarts.baidu.com/gallery/editor.html?c=candlestick-brush

But if I customize the tooltip it removes the colour coded round like in this example:

https://ecomfe.github.io/echarts/doc/example/tooltip.html#-en

Is there a way to use custom tooltip and put the colour round back.

Here is another way to explain it. Go to this link pie-simple and you will find charts with no coloured round.

delete the following line:

formatter: "{a} <br/>{b} : {c} ({d}%)"

then press <运行> to refresh and you will see the round back.

score 20 · Accepted Answer · answered Aug 18 '17 at 09:10

ECharts support user-defined tooltip, include the color you wanted.

For example you have a line chart demo like this, and you want to change the default tooltip, add % or something else after the tooltip without lose the default color.Just replace tooltip code with this code below.

tooltip : {
    trigger: 'axis',
    axisPointer: {
        animation: true
    },
    formatter: function (params) {
        var colorSpan = color => '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:' + color + '"></span>';
        let rez = '<p>' + params[0].axisValue + '</p>';
        //console.log(params); //quite useful for debug
        params.forEach(item => {
            //console.log(item); //quite useful for debug
            var xx = '<p>'   + colorSpan(item.color) + ' ' + item.seriesName + ': ' + item.data + '%' + '</p>'
            rez += xx;
        });

        return rez;
    }        
},

with this tooltip code, you will see the original tooltip color 邮件营销: 90 become color 邮件营销: 90%, we add self-defined % to tooltip.

Used this for another purpose than OP. The "params" argument in formatter function is not an array in my case but already an array item (formatter is called for every item in the chart separately in my case). EDIT: Realized it depends on "trigger" which is axis in your case and item in my case. — Kozuch, Oct 17 '17 at 10:07

ahmadalibaloch · Answer 2 · 2020-08-08T05:08:13.100

20

Echarts already sends the marker html in params of each series with specific color. To create an original looking tooltip you can simply use that like this for line chart:

   {
     formatter : (args) => {
       let tooltip = `<p>${args[0].axisValue}</p> `;

       args.forEach(({ marker, seriesName, value }) => {
             value = value || [0, 0];
             tooltip += `<p>${marker} ${seriesName} — ${value[1]}</p>`;
       });

       return tooltip;
  }

edited Aug 08 '20 at 05:08

answered Oct 08 '18 at 14:48

ahmadalibaloch

5,851
2
50
59

1

Nice catch! This is a very useful but undocumented feature. – Bruce Sun Mar 23 '20 at 03:50
1

this is the way – Raph Oct 27 '21 at 12:48

score 4 · Answer 3 · answered Nov 01 '16 at 11:52

One way to solve this is to return custom HTML in your tooltip formatter, for instance:

var formatTooltipLine = function(color){
    return "<span style='display:inline-block;width:10px;height:10px;border-radius:50%;background-color:"+color+";margin-right:5px;'></span><span>line text</span>"
}

var formatter = function(){
    // custom title
    var lines = ["<b>2016</b>"];

    // custom lines
    ["red", "orange"].forEach(function(color){
        lines.push(formatTooltipLine(color)); 
    });

    return lines.join("<br>");
}

Example: https://cdn.datamatic.io/runtime/echarts/3.3.0_61/view/index.html#id=117670017722819924657/0B3wq5VFn9PllSEVsQTJvcnVBZU0

Echarts3 (baidu) colored round in tooltip

3 Answers3

Linked