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

[benmccann]

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: https://github.com/chartjs/Chart.js/issues/4601

[benmccann]

@atav32 if you want to contribute to this feature, probably the best way to get started would be to start a discussion on the Slack channel (link here). @kurkle just mentioned in the Slack channel that he’s exploring a solution