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.

Philomena

Answer 1

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.

Lerma

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. – Ashantiashbaugh

Answer 2

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;
     }
   }

Kussell

Nice catch! This is a very useful but undocumented feature. – Putup

this is the way – Cornhusk

Answer 3

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

Bimetallism