Kurt Van den Branden
Kurt Van den Branden

Reputation: 12943

Chart.js: passing objects instead of int values as data

Is it possible to pass an array of objects instead of an array of integers? The following code works but results in a flat zero line:

var ctx = document.getElementById("a").getContext("2d");
var data = {
    labels: ["Fri", "Sat", "Sun"],
    datasets: [{
    label: "Chart B",
    fillColor: "rgba(220,220,220,0.2)",
    strokeColor: "rgba(150,150,150,1)",
    pointColor: "rgba(150,150,150,1)",
    pointStrokeColor: "#fff",
    pointHighlightFill: "#fff",
    pointHighlightStroke: "rgba(220,220,220,1)",
    data: [{
                y: 48,
                name: "Value one",
                date: "2015-04-30"
            }, {
                y: 40,
                name: "Value two",
                date: "2016-05-30"
            }, {
                y: 19,
                name: "Value three",
                date: "2016-06-30"
            } ]
    }]
};

var Chart = new Chart(ctx).Line(data);

Upvotes: 13

Views: 18118

Answers (3)

greedy52
greedy52

Reputation: 1405

In the data structure doc (version 3.5.1 at the time of writing this), it is documented objects can be used as data and parsing option is also available to pick the keys.

Example from the doc:

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

Upvotes: 0

Janne
Janne

Reputation: 1151

I can confirm that answer @rinogo gave works on latests version. You can add custom properties to dataset and use 'em in tooltip or elsewhere afterwards.

First add data to dataset. On my case I only have one set, so I'm just pushing points.

chartData.datasets[0].data.push({
    y: groupedBooking.distinctCount,
    distinctUsers: distinctUsers
});

... and finally override callback with chartOptions:

options: {
    tooltips: {
        callbacks: {
            label(tooltipItem, data) {
                console.log(data);
                return data.datasets[0].data[tooltipItem.index].distinctUsers;
            }
        }
    }
}

If you would happen to have multiple datasets you get datasetIndex from tooltipItem as well... so to confirm, X can be omitted from datapoint and customer properties are preserved within object.

Upvotes: 2

rinogo
rinogo

Reputation: 9163

In short, I think your example should work. The key is to use y for the y value in the chart, and to add your arbitrary property to the object, as well.

It looks like this is what you're doing, but you've reported it's not working... It works for me, though! ?


Longer answer

According to the docs for Line, data can be a Number[]:

data: [20, 10]

...but it can also be a Point[]:

data: [{
        x: 10,
        y: 20
    }, {
        x: 15,
        y: 10
    }]

This was intended to be used for sparsely-populated data sets. Through experimentation, I've found you can omit the x property and simply specify the y property. The x value will be inferred, as usual.

You can also add in any other arbitrary properties that can be accessed from your label callback. So, you might end up with something like this:

data: [{
        y: 20,
        myProperty: "Something"
    }, {
        y: 10,
        myProperty: "Something Else"
    }]

Upvotes: 11

Related Questions