Customize ChartJS Hover Data Format

Question

I have the following chart :

Which was obtained with this code:

import React, {Component} from 'react';
import { Line } from 'react-chartjs-2';

const data = {
  labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
  datasets: [
    {
      label: 'First ',
      fill: false,
      lineTension: 0.1,
      backgroundColor: 'rgba(75,192,192,0.4)',
      borderColor: 'rgba(75,192,192,1)',
      borderCapStyle: 'butt',
      borderDash: [],
      borderDashOffset: 0.0,
      borderJoinStyle: 'miter',
      pointBorderColor: 'rgba(75,192,192,1)',
      pointBackgroundColor: '#fff',
      pointBorderWidth: 1,
      pointHoverRadius: 5,
      pointHoverBackgroundColor: 'rgba(75,192,192,1)',
      pointHoverBorderColor: 'rgba(220,220,220,1)',
      pointHoverBorderWidth: 2,
      pointRadius: 1,
      pointHitRadius: 10,
      data: [65, 59, 80, 81, 56, 55, 40]
    }
  ]
};

const options = {
  tooltips: {
      callbacks: {
          label: function(tooltipItem, data) {
              var label = data.datasets[tooltipItem.datasetIndex].label || '';

              if (label) {
                  label += '-->';
              }
              return [2, 4, 1, 5, 4, 4, 3];
          }
      }
  }
}

export default class LineDemo extends Component {
  render() {
    return (
      <div>
        <h2>Line Example</h2>
        <Line ref="chart" data={data}  options={options}/>
      </div>
    );
  }
}

My problem is that I would like to add some data to the points when it is hovered. I have an additional array like this : [2, 4, 1, 5, 4, 4, 3] representing the age of the object and I would also like this to be seen when I hover on the a dot.

Please checkout the picture below for a better explanation.

I looked through the chartjs documentation but I could not seem to find an explanation. Any help would be grately appreciated!

Niklas E. · Answer 1 · 2021-01-01T17:09:17.797

0

You're probably looking for a feature like this:

var chart = new Chart(ctx, {
    type: 'line',
    data: data,
    options: {
        tooltips: {
            callbacks: {
                label: function(tooltipItem, data) {
                    var label = data.datasets[tooltipItem.datasetIndex].label || '';

                    if (label) {
                        label += ': ';
                    }
                    label += Math.round(tooltipItem.yLabel * 100) / 100;
                    return label;
                }
            }
        }
    }
});

This feature is well listed and described in the official doc. You probably just overlooked it. Please have a look at:
Label Callback · Tooltip · Chart.js

The label callback can change the text that displays for a given data point. A common example to round data values; the following example rounds the data to two decimal places.
_{(see code block above)}

Frohes Neues!

Edit:

You can pass chart options, like you can pass data to React's ChartJS.
It looks something like this: <Line ref="chart" data={data} options={options} />.

For more about that see: How to set options in react-chartjs-2?

edited Jan 01 '21 at 17:09

answered Jan 01 '21 at 16:51

Niklas E.

1,848
4
13
25

Thank you. Yes I looked at it but I don't understand where I should place this in my code. – colla Jan 01 '21 at 17:05
You can pass options like you can pass data to react's chartJS. Use something like ``. For more about that see: [How to set options in react-chartjs-2?](https://stackoverflow.com/questions/43507799/how-to-set-options-in-react-chartjs-2) – Niklas E. Jan 01 '21 at 17:07
Thank you. I edited my code but does not seem to work. Could you please let me know where I should place my list? – colla Jan 01 '21 at 17:18
Hey, I can't do everything for you, mate. It isn't that complicated. You can do that! Having several following questions is not within the [scope of StackOverfow questions](https://stackoverflow.com/help/how-to-ask). You cannot just update your question to a completely new one, just like that. We are not a workhorse. – Niklas E. Jan 01 '21 at 17:21

score 0 · Answer 2 · answered Jan 01 '21 at 16:59

0

You need to pass tooltips option like this sample: https://codesandbox.io/s/cool-feather-85xfi?file=/src/App.js:2175-2213, then custom your tooltip in bodyLines.forEach(function (body, i)

answered Jan 01 '21 at 16:59

Viet

12,133
2
15
21

Customize ChartJS Hover Data Format

2 Answers2