Custom objects as data for datasets?

First of all, pardon me if this feature has already been asked for or even exists. I’ve tried to search for it through the documents, the issues here and on Stack Overflow with no success. I also read the issue #937 but couldn’t find any implementation of it.

Using Chart.js I’ve encountered situations where I would like to have custom objects as data for the datasets (for example when I have custom tooltip content and would need to get a specific value to display that is not part of the plotted value). Of course if this is supported there need to be some kind of formatter function that will return what data to plot.

For example, consider this possible approach:

const chartData = [
    { name: "John", age: 25, occupation: "Teacher" },
    { name: "Eric", age: 31, occupation: "Lawyer" },
    { name: "Maria", age: 52, occupation: "Surgeon" }
];

const myChart = new Chart(ctx, {
    type: 'bar',
    data: {
        labels: chartData.map(data => data.name),
        datasets: [
            {
                label: 'Age',
                data: chartData,
                formatter: data => data.age
            }
        ]
    }
});

Then in, for example, the tooltip callbacks we can get the occupation of each person because its part of the data that is being supplied as parameters.

I know I can get the same results by mapping some id from the tooltip to some map which is the data but it gets very cluttered and not as consistent if you need to do this multiple times.

Is there any implemented way to achieve this today, or is it something that’s wished for?

Thanks
BR

Author: Fantashit

1 thought on “Custom objects as data for datasets?

  1. It could be nice to support data in any format and to also accept a function to map that data to our x and y values. Also related: #4601

Comments are closed.