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.

Answer 1

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.

Answer 2

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",
    },
  ],
};