Dataset data should be an object, not an array to ensure alignment with the labels

[PaulWieland]

Feature Proposal

We should be able to specify the data in a dataset as an object that has the values keyed against the labels of the chart.

Feature Use Case

The current implementation works like this:

chart.data.labels = ["A","B","C"];
chart.data.datasets = [{data: [10,0,3]}];

This means you have to make sure that your dataset data array must be zero filled and populated in the same order as the label array. This adds unnecessary complexity to the code that builds the chart data object.

I have run into an issue creating a multiple series from an odata source. In odata, there is no guaranty that you get a data point if the value is zero, which results in this:

chart.data.labels = ["A","B","C"];
chart.data.datasets = [{data: [10,3]}];

This obviously results in an invalid chart, as A is supposed to be 10, B is supposed to be 0 and C is supposed to be 3.

Imagine if the dataset could be specified as an object instead of an array. This would make dataset building MUCH easier and less error prone.

chart.data.labels = ["A","B","C"];
chart.data.datasets = [{data: "A":10,"C":5}]

Possible Implementation

The chart.js library could maintain backward compatibility by detecting whether the dataset data property is an object or an array.

[benmccann]

You can do this today. The syntax is a bit different than what you suggested though. It's an array of objects instead of a single object. E.g.:

data: [{x:'2016-12-25', y:20}, {x:'2016-12-26', y:10}]

[PaulWieland]

@benmccann I just tested this and it doesn't seem to work as expected (unless I did something wrong).

The x property doesn't force it to align with the value of the label array, and if you skip one, it stops plotting the remaining values.

1. skipping a value stops the plot, which was the case I was illustrating
2. B & C are plotted incorrectly / swapped

[benmccann]

Yeah, the input format is supported, but then the x-value is ignored and only the index is used

Potentially fixed by #6106 ?

[PaulWieland]

Possibly - it seems they are abandoning the labels array all together? If that's the case I think does simplify things... not sure how I feel about having to specify X & Y properties for every data point as a trade off...

[benmccann]

Custom data format was requested here as well: #5988

[kurkle]

Quite easy to use an object as Chart.js data source:

chart.data.labels = Object.keys(yourDataObject);
chart.data.datasets = [ { data: Object.values(yourDataObject) } ];

Note: Object.values is not supported by IE.

[PaulWieland]

@kurkle that doesn't work because in the case of:

chart.data.labels = ["A","B","C"];
chart.data.datasets = [{data: "A":10,"C":5}]

it will leave "B" out of the X axis.

Consider this example too:

chart.data.labels = ["Jan","Feb","Mar","Apr","May"];
chart.data.datasets = [
	{label: "Company A", data: {"Jan":10,"Mar":5}},
	{label: "Company B", data: {"Jan":8,"Feb":12,"Apr":5}},
	{label: "Company C", data: {"Feb":4,"May":9}}
]

Another additional benefit of my suggestion is that you could easily reorder the X Axis by re-ordering the label array.

[kurkle]

{data: "A":10,"C":5} is not valid js.

Added support for you second example in #6106. Shown there: CodePen
It would need support from maintainers / other contributors to make it. I think we all agree to the idea of parsing once and using parsed data everywhere, but the implementation is all my doing and has not been discussed much.

[PaulWieland]

@kurkle Yeah, sorry about that, it should have been {data: {"A":10,"C":5}}

Thank you very much for your efforts. I really hope your pull request is implemented, as it seems this is how the library should behave for all users.

[PaulWieland]

@kurkle, can this be amended to work for line charts as well?

I ran into an issue trying to plot a forecast line. In this case I have 12 Months on the X axis and I want to plot a line that goes from today forward only. With the current behavior, it starts at the beginning of the X axis and stops when it runs out of points.