Two different charts on same axes

[sabres207]

Hey all, I have a feature request that I'm not sure what's the best way to implement.
We already have a line chart with zoom/pan that represent a time series of some data.

What I need is another kind of chart, that is actually only a horizontal bar that change its color by some other part of the data (in some cases it would be split for 2-3 colors), and I want it to also pan and zoom in the same scale as the line chart above it.

Any suggestions how to merge 2 graphs in one axes grid lines and make them interact the same for zoom and pan actions? Any suggestions about this type of graph?

[kurkle]

You can use the same scales for different kinds of charts.
For simple example: https://www.chartjs.org/docs/latest/samples/other-charts/combo-bar-line.html

The image you attached does not really look like a horizontal bar chart though, but not it does not have any line either, so not sure if that is related.

[sabres207]

thanks!

is there a way to create a custom chart that would look like that?
I need one bar that change its color according to the data.

[kurkle]

https://chartjs-chart-matrix.pages.dev/ could maybe work for you.

For creating a custom chart type, you should start from there: https://www.chartjs.org/docs/master/developers/charts.html