Chart.js: Add multiple data in tooltip

Created on 11 Aug 2016  路  3Comments  路  Source: chartjs/Chart.js

Hi, I could not figure out this. Please help me out.

I am using BarChart. I have an variable with attributes p,q,r, etc.

{
    p: "",
    q: "",
    r: "",
    ...
}

Now, when I hover on a bar (bar length is decided by 'p' value), I need the tooltip text to show the values of p, q and r. Currently, only one value is allowed to be shown.

Any help is appreciated. Thanks in advance

support

Most helpful comment

@akashrajkn if all your data is in the chart, you can set the tooltip to a different mode

options: {
  tooltips: {
    mode: 'label'
  }
}

If the data you want to display is not in the chart, you can provide additional data callbacks that define new rows of the tooltip. See https://github.com/chartjs/Chart.js/blob/master/samples/tooltip-hooks.html for an example

All 3 comments

@akashrajkn if all your data is in the chart, you can set the tooltip to a different mode

options: {
  tooltips: {
    mode: 'label'
  }
}

If the data you want to display is not in the chart, you can provide additional data callbacks that define new rows of the tooltip. See https://github.com/chartjs/Chart.js/blob/master/samples/tooltip-hooks.html for an example

@etimberg Thank you for your answer.

Is such a thing (multiple lines in tooltip) possible with Chart.js v1.1.1? (I am using react-chartjs which uses v1.1.1)

@akashrajkn I don't think this is possible in v1

Was this page helpful?
0 / 5 - 0 ratings