-
Notifications
You must be signed in to change notification settings - Fork 11.9k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Howto Combined line/bar chart with x/y lines #4498
Comments
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
It seems as of the category labels of the bar chart somehow get passed through the time axis/ momentjs, too? |
@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 |
@etimberg thanks for bearing with me
My feeling is that something is at odds with how chart, dataset and axes types and label definitions interact:
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 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. |
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 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. |
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. |
For sake of reference: that got me down the wrong road. #4545 looks like the road to success. |
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?
The text was updated successfully, but these errors were encountered: