SauravKanchan / svelte-chartjs

svelte wrapper for chart.js
https://saurav.tech/mdbsvelte/?path=/story/charts--examples
MIT License
304 stars 40 forks source link

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

Open Bobetti opened 3 months ago

Bobetti commented 3 months ago

Would you like to work on a fix?

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

Bobetti commented 3 months ago

Please delete this request, found the answer deep inside documentation. Sorry.

DevilWarrior commented 1 month ago

Please delete this request, found the answer deep inside documentation. Sorry.

Could you share where please? I'm having the same issue.

Bobetti commented 1 month ago

Here is the link: https://www.chartjs.org/docs/latest/configuration/responsive.htmlOn Oct 3, 2024, at 20:13, DevilWarrior @.***> wrote:

Please delete this request, found the answer deep inside documentation. Sorry.

Could you share where please? I'm having the same issue.

—Reply to this email directly, view it on GitHub, or unsubscribe.You are receiving this because you authored the thread.Message ID: @.***>