[Chartjs]-Chart.js Using A JavaScript Object

by

1👍

✅

I just selected the x property from the array like so:

labels: progress.map(function (a) { return a.x; })

0👍

Using objects is possible in Chart.js 3.x and it can be an advantage (e.g. use other properties for tooltips).

Use parsing to specify the property for axes.

Example from chartjs.org:

type: 'bar',
data: {
    datasets: [{
        data: [{id: 'Sales', nested: {value: 1500}}, {id: 'Purchases', nested: {value: 500}}]
    }]
},
options: {
    parsing: {
        xAxisKey: 'id',
        yAxisKey: 'nested.value'
    }
}

Example 2 from chartjs.org:

const data = [{x: 'Jan', net: 100, cogs: 50, gm: 50}, {x: 'Feb', net: 120, cogs: 55, gm: 75}];
const cfg = {
    type: 'bar',
    data: {
        labels: ['Jan', 'Feb'],
        datasets: [{
            label: 'Net sales',
            data: data,
            parsing: {
                yAxisKey: 'net'
            }
        }, {
            label: 'Cost of goods sold',
            data: data,
            parsing: {
                yAxisKey: 'cogs'
            }
        }, {
            label: 'Gross margin',
            data: data,
            parsing: {
                yAxisKey: 'gm'
            }
        }]
    },
};

Leave a comment