How to format the tooltip value in echart (angular)

Question

How to format the tooltip in echart?

here's the code: https://stackblitz.com/edit/angular-ngx-echarts-ty4mlq?file=src/app/app.component.ts

const xAxisData = [];
const data1 = [];
const data2 = [];
const data3 = [];
const data4 = [];

for (let i = 0; i < 5; i++) {
  xAxisData.push('category' + i);
  data1.push((Math.sin(i / 5) * (i / 5 - 10) + i / 6) * 5);
  data2.push((Math.cos(i / 5) * (i / 5 - 1) + i / 6) * 5);
  data3.push((Math.cos(i / 5) * (i / 5 - 10) + i / 6) * 5);
  data4.push((Math.sin(i / 5) * (i / 5 - 1) + i / 6) * 5);
}

this.options = {
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow',
    }
  },
  legend: {
    data: ['Category 1', 'Category 2']
  },
  xAxis: {
    data: xAxisData
  },
  yAxis: {},
  series: [
    {
      name: 'Category 1',
      type: 'line',
      barCategoryGap: '0%',
      data: data1
    },
    {
      name: 'Category 1',
      type: 'line',
      barCategoryGap: '0%',
      data: data2
    },
    {
      name: 'Category 2',
      type: 'line',
      barCategoryGap: '0%',
      data: data3
    },
    {
      name: 'Category 2',
      type: 'line',
      barCategoryGap: '0%',
      data: data4
    }
  ]
};

output: enter image description here

expected output should be like this.

Category0

Category 1: 0 ping

Category 1: 10 Mbit/s

Category 2: 10 ping

Category 2: 20 Mbit/s

Answer 1

To format your tooltip use below code. I have made it according to your output given.

tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow',
    },
    formatter: (params) => {
        return params[0].name + "<br>" +
            params[0].seriesName + ": " + params[0].data.toFixed(2) + " ping <br>" + 
            params[1].seriesName + ": " + params[1].data.toFixed(2) + " Mbit/s <br>" + 
            params[2].seriesName + ": " + params[2].data.toFixed(2) + " ping <br>" + 
            params[3].seriesName + ": " + params[3].data.toFixed(2) + " Mbit/s <br>" 
  }

stackblitz : https://stackblitz.com/edit/angular-ngx-echarts-6t4ghz