chartjs / chartjs/Chart.js

Dynamically changing the chart's type

Open
#11,291 5 comments 0 reactions 0 assignees View on GitHub
type: bug
Dominant language
JavaScript
Stars
67.7k
Forks
11.9k
Avg merge
7h 39m
Merged PRs (30d)
5

Description

### Expected behavior

Dynamically changing chart's type without UI or any other issues.

### Current behavior

Switching between the types affect the chart's UI (you'll see an example figure below).

Everything I have is only onChange listener and this piece of code which destroys the chart and then creates it again:
```tsx
chart.destroy()
const ctx = canvasRef?.getContext('2d') as ChartItem
const config = unwrap(merged)
chart = new Chart(ctx, {
type: config.type,
data: config.data,
options: config.options,
plugins: config.plugins,
})
```

Here is what happens, if I switch multiple times between `line` type and `radar`. Some of `radar` type's UI stays still visible even after switching back to `line` type:
image

### Reproducible sample

https://github.com/s0ftik3/solid-chartjs

### Optional extra steps/info to reproduce

You can test yourself the behavior. Just clone my rep and run `dev` command, then open localhost at 3000 port and try to change the chart's type multiple times.

### Possible solution

_No response_

### Context

I am not sure if it's specifically Chart.js issue or my implementation of it for SolidJs. Would be really grateful if you help me with that. Thanks in advance!

### chart.js version

4.3.0

### Browser name and version

_No response_

### Link to your project

https://github.com/s0ftik3/solid-chartjs

Contributor guide

No contributing guide indexed for this repository

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.