Chart Type Update not working

[cristiansimion]

Expected Behavior

I'm trying to make a chart that can switch between multiple views. In this situation, it's changing the type of chart from 'line' to 'horizontalBar' or 'radar'. I've created a simple pen script that would showcase the issue I'm currently having.

I expected after updating the config variable ( that contains all the labels, data and options ) to help render a new Chart with the different type.

Current Behavior

What i've noticed is that I can set a variable

let var = { type: "horizontalBar", data: [ data goes here ] };

and I could use that to generate a new functional Chart. The problem is, the title, positioning of the legend and everything else gets reset to defaults and the title is missing. I'd like to keep all of those settings intact, but if I'd use a similar object as initially, the chart no longer displays any values.

Possible Solution

Steps to Reproduce

On https://codepen.io/derains/pen/jOVywBv I've created a sample of the code that would showcase the problem.

• If you click the "Horizontal Update" - this is the one that is expected to work as intended but it renders an empty Chart.
• If you click on "Radar Update" - this will work but the INITIAL display of the chart title and legend gets messed up.

Context

Environment

• Chart.js version: CDN ( 2.8.0 ) - https://cdn.jsdelivr.net/npm/[email protected]
• Browser name and version: Google Chrome Version 88.0.4324.150 (Official Build) (64-bit)
• Link to your project: https://codepen.io/derains/pen/jOVywBv

[LeeLenaleee]

If you make your bar at the same way as your radar it works, so instead of setting only the type give it a new object.

Also had to remove your local chart variables and just use window.chart because otherwise it seems it didnt override the references correctyly and then on hover it would return to last chart type

Example: https://codepen.io/leelenaleee/pen/vYygZPW

[cristiansimion]

The solution you've provided still has the issue that I'm talking about. The legend and title get reset if I do it as you've mentioned. So it's not a reliable workaround. I would want to work around it if it would provide a way to update the title of the chart along with the legend position.

[cristiansimion]

@LeeLenaleee , after further review, I'd also want to mention that your solution is identical to what I had in place for the Radar part, which as I've mentioned in the post on this issue is not working as expected.

[LeeLenaleee]

Updated the pen, the options didn't get passed along. This should be what you want, might want to clean it up a bit.

[cristiansimion]

Awesome! That works exactly how I'd expected, could you please help clarify why do you need to set the object using Object.assign() rather than just passing the same object?

[etimberg]

I believe it's due to how the options are merged together. This is part of the reason why #8374 is under development

[cristiansimion]

I have a Eureka moment here. The actual cause is not how the options are merged together. The problem seems to be that if you switch from type: 'line' to type: 'horizontalBar', the algorithm somehow doesn't adapt properly. This is further proven by 2 things:

1. This code:
   {scales: {yAxes: config.options.scales.xAxes, xAxes: config.options.scales.yAxes}
   Shows an inversion of the axes, without which it seems that the chart crashes.
2. You don't need the Object.assign() to be able to fix this, you can simply duplicate/store initial values in a variable then inverse them on the time of the script calling and it would solve the problem.

My estimation would be that it has to do with how the code is rendering the values, because something is causing it to either make the x/y have a problem OR the horizontalBar aglorithm is by default set to be with values at the x axis and the labels on the Y axis, which is causing an issue to adapt ( most likely ).

However, after testing something else, it seems that changing the values of the options.scales ( regardless if it's x OR y axis ) would make the render happen. Any ideas?

[cristiansimion]

If you need me to update my codepen to understand the above statement, let me know and I'll do so.

[cristiansimion]

I have further investigated this. It seems that if you would do the following on each new object, it works correctly. This leads me to think that these two items don't get reset properly on the .destroy() method.

this.config.options.scales.yAxes = []; this.config.options.scales.xAxes = [];

[kurkle]

No need to destroy/re-create, at least in v3: https://codepen.io/kurkle/pen/XWNaPYw

Would probably make sense to have options objects for each chart types and switch the whole options along the type.

[etimberg]

Closing since this looks nicely resolved in v3