Skip to content

[Bug]: Can't make the chart responsive #165

@Bobetti

Description

@Bobetti

Would you like to work on a fix?

  • Check this if you would like to implement a PR, we are more than happy to help you go through the process.

Current and expected behavior

Take the bar chart official sandbox.
Resize window horizontally. Chart resizes to the smaller size without problem, but never resizes back when window becomes larger.

In my Svelte project, see the code below, I'm using tailwind:

<div class="chart-container w-full">
	<Bar {data} options={{ responsive: true }} class="chart" id={Id} />
</div>

On window resize - huge flickering, but chart remains small.

Registering on window resize event and changing canvas element width - has no effect.

Can't make the chart responsive

Reproduction

https://codesandbox.io/p/devbox/github/SauravKanchan/svelte-chartjs/tree/master/sandboxes/bar?file=%2Fcomponents%2FChart.svelte%3A17%2C13

chart.js version

4.4.3

svelte-chartjs version

3.1.5

Possible solution

No response

Metadata

Metadata

Assignees

No one assigned

    Labels

    bugSomething isn't working

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions