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);

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);

• javascript
• charts
• chart.js

3 Answers 3

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"
    }]

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.

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'
    }
}