EChart series with different tooltip

Question

I have the following EChart in my Angular application:

var option = {
  xAxis: {
    type: 'category',
    data: ["A", "B", "C", "D", "E"]
  },
  yAxis: {
    type: 'value',
  },
  tooltip: {
      trigger: 'axis',
         axisPointer: {
           type: 'shadow',
         },
        formatter: (params) => {
          return (
            "Text One" +
            '<br/>' +
        
            params[0].name
          );
        },
      },
  series: [
    {
      data: [1, 2, 3, 4, 5],
      name: 'value',
      stack: 'one',
      type: 'bar',
      tooltip: {
        formatter: (params) => {
          return (
            "Text One" +
            '<br/>' +
        
            params[0].name
          );
        },
      },
    },
    {
      data: [0, 1, 2, 3, 4],
      name: 'prediction',
      stack: 'one',
      type: 'bar',
      tooltip: {
        formatter: (params) => {
          return (
            "Text Two" +
            '<br/>' +
            params[0].name
          );
        },
      },
    },
  ],
};

I basically have two series and my question is how I can format the tooltip for each series specifically.

In my example only "Text 1" is shown from the first series.

score 11 · Answer 1 · answered Oct 10 '20 at 18:50

If you use tooltip trigger 'axis', 'params' in the formatter function argument would be an array containing series tooltip information.

If you want to format the first series, you can access params[0]. Similarly if you want to format the second series, you can access params[1].

See example below:

var option = {
  xAxis: {
    type: "category",
    data: ["A", "B", "C", "D", "E"],
  },
  yAxis: {
    type: "value",
  },
  tooltip: {
    trigger: "axis",
    axisPointer: {
      type: "shadow",
    },
    formatter: (params) => {
      return `
                Tooltip: <br />
                ${params[0].seriesName}: ${params[0].value}<br />
                ${params[1].seriesName}: ${params[1].value}
                `;
    },
  },
  series: [
    {
      data: [1, 2, 3, 4, 5],
      name: "model",
      stack: "one",
      type: "bar",
    },
    {
      data: [0, 1, 2, 3, 4],
      name: "prediction",
      stack: "one",
      type: "bar",
    },
  ],
};

score 7 · Answer 2 · answered Sep 15 '20 at 17:03

7

There are two types of tooltip trigger ('item' and 'axis')

Please use tooltip.trigger = 'item', to display tooltip individually for different series.

tooltip.trigger='axis' is used to display a common tooltip with all series data at a given axis level.

answered Sep 15 '20 at 17:03

Narayanan Ramanathan

1,310
10
18

EChart series with different tooltip

2 Answers2