Skip to content
ECharts

Tooltip

Custom HTML tooltip with crosshair axis pointer.

#echarts#tooltip

Code

echarts
const chart = echarts.init(document.getElementById('chart'));
chart.setOption({
  tooltip: {
    trigger: 'axis',
    show: true,
    backgroundColor: 'rgba(50, 50, 50, 0.9)',
    borderColor: '#777',
    borderWidth: 1,
    padding: [8, 12],
    textStyle: { color: '#fff', fontSize: 12 },
    axisPointer: {
      type: 'cross',
      label: { backgroundColor: '#6a7985' }
    },
    formatter: function(params) {
      const items = Array.isArray(params) ? params : [params];
      let html = '<b>' + items[0].name + '</b><br/>';
      items.forEach(function(item) {
        html += item.marker + ' ' + item.seriesName +
                ': <b>' + item.value + '</b><br/>';
      });
      return html;
    }
  },
  xAxis: { type: 'category', data: ['A', 'B', 'C'] },
  yAxis: { type: 'value' },
  series: [
    { name: 'S1', type: 'line', data: [10, 20, 30] },
    { name: 'S2', type: 'line', data: [15, 25, 35] }
  ]
});