Search code examples
angularng2-charts

MultiTooltip ng2-Charts & Angular 2/4

I have a chart that has two lines draw on it. I want that when I hover on one point of either of the two lines, the little tooltip box shows the value of both points at that x point. Is it possible to do this?

Solution

  • I actually have this same problem (I'm using ng2-charts 1.6.0/chart.js 2.6.0 with Angular 4) and according to this Github post, you need to add the mode: 'label' to the options config. Here's my final options for my line chart:

    { 
  responsive: true,
  maintainAspectRatio: true,
  multiTooltipTemplate: '<%= datasetLabel %> - <%= value %>',
  tooltips: {
    mode: 'label'
  }
};

    And I now have a tooltip that looks like this:

    January
Bob - xx
Tina - xx

    Similar/related SO post: chart-js-multitooltip-labels