With react-Chart-js2, is there a way to add more fields to the datasets, for example, text that accompanies data that was submitted?

Question

I have a chart that displays people's predictions on events from a scale of 0-100. To accompany their submissions, I ask for a comment explaining why they said what they said. This is a crowdsourcing project so it would benefit other users if they could see what other users are thinking. Their predictions are stored in objects, like:

forecast: {
   certainty: 0.6,
   comments: "I said 60% because I think that this is pretty likely",
   date: "Tue Feb 22 2022"
}

And these forecasts are displayed like this:

But I would love it if when hovering over the data in the chart, you could also see the comment:

In the picture above, that data is stored in the following format:

let allData = {
    label: "AllData",
    data: [],
    showLine: false,
    borderWidth: 0,
    pointRadius: 4
}

and then the actual elements inside that data array is stored like:

let myForecast = {
    x: dateOfForecast (date variable),
    y: myActualForecast (double variable)
}

My thinking was that there would be a way to add a "Description" variable to that myForecast object to accompany the x and the y values, like this:

let myForecast = {
    x: dateOfForecast (date variable),
    y: myActualForecast (double variable),
    description: "I said 60% because I think that this is pretty likely"
}

but as far as I can tell there is nothing in the APIs allowing this. I would love to be wrong!

Thank you in advance, I hope my question makes sense and is clear.

score 2 · Answer 1 · answered Feb 28 '22 at 16:02

Thanks to some wider reading, I found this answer from another post: https://stackoverflow.com/a/70387861/12464559

Where the accepted answer suggests using the callback provided by ChartJS (the options object for your chart > plugins > tooltip > callback).

I console.log()'d the context object that it passes into the callback, thus allowing me to find where in that context object the x, y and description values for each datapoint were stored (they were in the context variable > raw). I then appended the description like this:

tooltip: {
   console.log(context);
   let label = context.database.label || '';
   if (label) {
       label += context.raw.description;
   }
   return label;
}

Hope this helps anyone in the future! Full credit to toki in the post shared above!

With react-Chart-js2, is there a way to add more fields to the datasets, for example, text that accompanies data that was submitted?

1 Answers1