title: How to format the tooltip value in echart (angular)
body: <p>How to format the tooltip in echart?</p>
  
  <p>here's the code: <a href="https://stackblitz.com/edit/angular-ngx-echarts-ty4mlq?file=src/app/app.component.ts" rel="nofollow noreferrer">https://stackblitz.com/edit/angular-ngx-echarts-ty4mlq?file=src/app/app.component.ts</a></p>
  
  <pre><code>const xAxisData = [];
  const data1 = [];
  const data2 = [];
  const data3 = [];
  const data4 = [];
  
  for (let i = 0; i &lt; 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
      }
    ]
  };
  </code></pre>
  
  <p>output:
  enter image description here</p>
  
  <p>expected output should be like this.</p>
  
  <p>Category0</p>
  
  <p>Category 1: 0 ping</p>
  
  <p>Category 1: 10 Mbit/s</p>
  
  <p>Category 2: 10 ping</p>
  
  <p>Category 2: 20 Mbit/s</p>