Change chart type based on canvas width

[theanorak-keith]

I have some charts I'm working on where on small screens (i.e. phones), the datalabels become problematic (overlapping, difficult to read). I've found a solution by writing a quick chartjs plugin to change datalabel options below a specific canvas width; it seems to work well enough.

There are some charts I'm working on where this approach doesn't work. There are a number of vertical bar charts which become too dense on small screens, and I need to make a more drastic change (to horizontal bar chart) to maintain readability on small screens.

I could simply render two instances of the chart, one in each format, and show/hide the container div based on screen size.

I've seen examples of using destroy() and update() in code outside chartjs to update a chart based on a button press or other user action; I presume I could therefore use an event handler on the page or canvas element to call destroy/update with appropriate options.

BUT

I'm wondering if there's a practical way to do this via a plugin, so it's all handled within the chart code. I tried a quick-and-dirty test but (as you might expect), after calling destroy, everything goes wrong :).

Is this impossible? Should I give up and use one of the workarounds? I'd prefer to avoid them as it additionally complicates the code, which given the environment it will be used, adds editing complications I'd prefer to avoid.

[LeeLenaleee]

Why dont you take the width of the screen or canvas before making the chart, run it through a swtich and put the type in a variable and then set that variable as your chart type while making your chart. Or if you just want to switch between bar and horizontalBar put it directly in chart type

new Chart(ctx, { type: canvaswidth < 300 ? 'horizontalBar' : 'bar' })

[kurkle]

If using v3, where the orientation is changed by indexAxis option, a plugin changing that "kind of" works:
https://codepen.io/kurkle/pen/YzppZMb

"kind of", because the scales do not update their ticks properly, for some reason