Chart.js: Add support for ticks.source: 'data' to category scale

[ortonomy]

Expected Behavior

I expect that using the new 2.7 feature of defining a bar chart using arrays of objects with x/y values e.g. [{x: ..., y: ...}, ...] to generate the x labels and y values on a barchart as per the docs here: http://www.chartjs.org/docs/latest/charts/bar.html

You can also specify the dataset as x/y coordinates.

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

Current Behavior

See interactive pen here: https://codepen.io/ortonomy/pen/NaxVeZ

Providing a data.dataset with an array of x/y objects (e.g. data: [{x: ..., y: ...}, ...]) does not render all data points. It only renders a single bar, using the first value of the data set.

The only way that I can get it to display multiple values, is by providing the labels: [...] property to the data object. And even then, the number of bars displayed is only equal to the length of labels: [...].

I may be wrong here, but from what I can tell, the reason for providing the array of x/y objects is so the data itself provides the x label.

Steps to Reproduce (for bugs)

code
data: { // labels: ['x','x'], datasets: [{ label: '# of Votes', data: [{x: 'label', y: 12}, {x: 'label', y: 19}, {x: 'label', y: 3}, {x: 'label', y: 5}, {x: 'label', y: 2}, {x: 'label', y: 3}] }] },
link
https://codepen.io/ortonomy/pen/NaxVeZ

Context

The data coming back from my API is already in an object: {x: ..., y: ...} format so you can imagine my joy at seeing this being provided as an option. Now I have to split the data to use x: ... for labels: [...], and then y: ... for data: [...].

Environment

• Chart.js version:
  2.7.0
• Browser name and version:
  Chrome 61 Mac OS X
• Link to your project:
  Can't link -- is private.

[ortonomy]

This feature is referenced here: https://github.com/chartjs/Chart.js/releases/tag/v2.7.0

4456 Allow specifying bar chart via {x, y} data points. Thanks @benmccann

[SanoLitch]

+1 Also found this bug today

[benmccann]

@nagix worked on this as well in https://github.com/chartjs/Chart.js/pull/4673

[benmccann]

Yes, you still need to specify the labels. It's at least a bit easier for you because you now only need to create the labels instead of creating the labels and transforming the data from your format to array format.

One solution to this would be to add a ticks.source: 'data' just like @simonbrunel added in the time scale in https://github.com/chartjs/Chart.js/pull/4507. And it should default to this if the user doesn't specify any labels.

[ortonomy]

Hmmm,

@benmccann -- but why then specify [{x:...,y:...},...] objects if the x:... part is never used. You're right it saves a little bit of time, but I still have to extract the x part into an array of labels.

Moreover, if you provide labels: [...] it _overrides_ any x-value, making it even more pointless.

To actually make use of this feature, the label resolution should be

for type bar chart

1. if data: { datasets[{data: [{x:...,...},...],...],...},...} else
2. if data: { labels: ['label',...],... } else
3. error

I might be missing something of course.

[benmccann]

Yes, I agree with you. It depends on the type of scale that you use. It works the way you'd expect with the time scale. It doesn't work well with the category scale, which is the default scale used by the bar chart.

[tchan]

@ortonomy Your codepen link does not work for me, it just opens up an new untitled pen on my account over at codepen.

[ortonomy]

@tchan -- thanks for pointing that out. I've updated the link