How to reverse the order of tooltip in Apache Echarts?

Question

I'm using Apache Ecahrt in my Vue project, while the order of tooltip is reverse to the data shown in the chart, the data displayed in red supposed to be at the top rather than the bottom in the tooltip:

Anyone can help me with this?

Answer 1

Starting v5 of echarts, you can pass order option to tooltip object to change the ordering of tooltip items.

order accepts these values: seriesAsc, seriesDesc, valueAsc, valueDesc. Read more here

In your case set order: seriesDesc to reverse the order.

option = {
    tooltip: {
        trigger: 'axis',
        axisPointer: {            
            type: 'shadow'        
        },
        order:'seriesDesc'
    },
    // rest of the options
 }

Answer 2

Murli Prajapati's solution can easily reverse the order of tooltip if you are using Apache Echart version 5.0 and above. Here's the complementary solution for people using a version lower than 5.0.

To custom the order of the tooltip, you can pass the formatter option to tooltip object, which supports string template and callback function. Read more here .

In this case, to reverse the order of tooltip you can:

   tooltip:{
      formatter: function (params) {
        var res = '';
        for (let i = (params.length-1); i >= 0; i--) {
          var data = '<p>' + params[i].name + '</p>';
          res += '<p class="padding:15px 0;">' + params[i].marker + params[i].seriesName + '<span style="font-weight:900;float:right;padding-left:15px;">' + params[i].value + '</span>' + '</p>';
        }
        return data + res;
      },
    //rest of the options
   }