Howto Combined line/bar chart with x/y lines

[andig]

The examples for combined bar/line chart only show examples where the line chart passes its data as [] array mapped onto the x-axis's categories. In my case I'd like to draw high-res line chart (energy production power over day) and additionally add bars for hourly production. The high-res line chart required {x:,y:} capabilities.

I'm thinking that- in order to do this- I needs to use 2 x-axes with the bar chart in categories and the line chart as time. That would allow me to pass time using {x:,y:} and hide it's axis.

Is this possible and would the approach be correct?

[andig]

See https://jsfiddle.net/andig2/b2a2ddsd/ for an example. This is working now. What I've noticed is that when I swap the two x axes and the category axis is no longer the first, the bars are not displayed. Is this by design or an actual issue?

Update even with this approach something weird is happening. If you look into the console messages there is

Deprecation warning: value provided is not in a recognized RFC2822 or ISO format. moment construction falls back to js Date(), which is not reliable across all browsers and versions. Non RFC2822/ISO date formats are discouraged and will be removed in an upcoming major release. Please refer to http://momentjs.com/guides/#/warnings/js-date/ for more info.

It seems as of the category labels of the bar chart somehow get passed through the time axis/ momentjs, too?

[etimberg]

@andig 2 x axes is the way to g to handle this.

Regarding the order of the axes: I don't think is should matter, but maybe it needs some investigation on our end.

Your hunch is correct about the labels. That happens at https://github.com/chartjs/Chart.js/blob/master/src/scales/scale.time.js#L69

[andig]

@etimberg thanks for bearing with me

Your hunch is correct about the labels

My feeling is that something is at odds with how chart, dataset and axes types and label definitions interact:

• I was only able to get this working by putting the category axis first (why?)
• labels, though a global option, should rather be specified on the category axis (and therefore not passed through the formatting of the time axis) but if I do this the bars aren't displayed (why?) - this is the issue your comment refers to (possible via via Allow category label definition at axis level #4506)
• in a more complex local example I had to set global type: 'bars' to get the bars to display at all. Setting at the dataset level as in the fiddle was not sufficient (why?)
• sparse bar charts aren't supported right now- chartjs expects consecutive values to map to the labels which is a problem e.g. for real-life electrical consumption data (feature- this is actually Cant provide x and y coordinates for bar data #2892)

I also don't have an approach yet how to dynamically create labels for changing scale (e.g. by month or by day). Ideally those labels would be identical with what the time scale would show for the high-res data. Do you have any suggestion how to obtain those and obtain them from the time axis before passing the options into chart generation (flot e.g. has a tickGenerator function)?

I didn't have time yet to create minimal examples but would raise details here if you want. In the end this might make a nice new mixed chart/xy data example.

[etimberg]

You are right that it seems weird, and it's mostly a legacy thing from Chartjs v1. I know that #3193 was opened to allow specifying the labels for each dataset.

Thinking more about the category axis going first, it's like how the chart default options are being applied. The bar chart has some defaults to set up the axis correctly for things like shifting the labels. This is also why the global type 'bar' was needed.

Regarding sparse bars, I feel that it would require a number of config options to make it work cleanly. The reason we don't support it right now is that, to me, it is unclear how bars should be sized in that case.

I don't know that there is a way to get the ticks for the time scale in a way that allows you to pass them to the options of the chart. The ticks aren't created until after the axes have been built because the number of ticks may depend on how much physical room is available on the canvas which won't be known until part way through the render process.

[andig]

I still haven't managed to create a proper mixed bar/line chart with category and time axis (i.e. bars and lines do NOT share a common axis).

I'm closing this for now and will open more specific issues for individual problems.

[andig]

2 x axes is the way to g to handle this.

For sake of reference: that got me down the wrong road. #4545 looks like the road to success.