Highchart - Area chart: customize tooltip

Question

I am trying to customize the tooltip of area chart. I am using Highchart for this.

I am plotting 3 series in area chart. My requirement is to show tooltip at fixed location in chart which is top center. Now, when i put cursor at any point then tooltip should show all series name and their current value where the cursor is. Refer below image:

Currently i am able to show tooltip on top - center and putting mouse at any point is showing current series name and data but it is showing current series name in all 3 places.

Highchart option:

Highcharts.chart('container', {
    chart: {
        type: 'area'
    },
    title: {
        text: 'ACCUMULATED WEALTH'
    },
    xAxis: {
        categories: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30],
        tickmarkPlacement: 'on',
        crosshair: {
            width: 1,
          color: "#ccc"
                },
        title: {
            enabled: false
        }
    },
    yAxis: {
        title: {
            text: false
        },
        opposite: true,
        labels: {
            formatter: function() {
              return '$' + this.value + 'k';
          }
        },
    },
    tooltip: {
      backgroundColor: 'none',
      borderWidth: 0,
      shadow: false,
      useHTML: true,
      shared: true,
      padding: 0,
      split: false,
      headerFormat: "",
      pointFormat: '<table><tr><td>{point.y}</td><td>{point.y}</td><td>{point.y}</td></tr>' +
      '<tr><td>{series.name}</td><td>{series.name}</td><td>{series.name}</td></tr></table>',
      footerFormat: "",
      positioner: function () {
        return { x: 250, y: 25 };
      }
    },
    plotOptions: {
        area: {
            stacking: 'normal',
            lineColor: '#666666',
            lineWidth: 1,
            marker: {
                lineWidth: 1,
                lineColor: '#666666'
            }
        }
    },
    series: [{
        name: 'Cash Flow',
        data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30]
    }, {
        name: 'Appreciation',
        data: [ 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31]
    }, {
        name: 'Principal',
        data: [3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 32, 33]
    }]
});

Here is what i have tries so far: https://jsfiddle.net/2pdossk7/13/

Please help. Thanks in advance!

from what i see it show all 3 series, but is show them 3 times each, because you have a table with the same 3 table cells (<td>{series.name}</td><td>{series.name}</td><td>{series.name}</td>), if you leave just one of them it seems to be working fine, or did i misunderstand the problem? — Liviu Boboia

morganfree morganfree · Accepted Answer · 2017-02-28T12:25:09

It might be difficult to achieve the desired result without tooltip.formatter.

This is how you can build tooltip text in a formatter:

  formatter: function(tooltip) {
    const points = this.points;
    let str = '<table><tr>';

    points.forEach(point => {
      str += '<td style="text-align:center">' + point.y + '</td>';
    });

    str += '</tr><tr>';

    points.forEach(point => {
      str += '<td><span style="font-size:20px;color:' + point.color + '">●</span> ' + point.series.name + '</td>';
    });

    str += '</tr></table>';

    return str;
  },

And position it in the center of the chart:

  positioner: function () {
    const chart = this.chart;

    return { x: (chart.plotWidth + chart.marginRight - this.label.getBBox().width) / 2, y: chart.plotTop + 10 };
  }

Example and output

https://jsfiddle.net/eb3ou25v/

Highchart - Area chart: customize tooltip

2 Answers

Example and output