Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Autosetting of size confusing me #23

Open
spresnac opened this issue Oct 28, 2024 · 1 comment
Open

Autosetting of size confusing me #23

spresnac opened this issue Oct 28, 2024 · 1 comment

Comments

@spresnac
Copy link

Hej 👋,
I do not know if I am doing anything wrong.
I do setup the chart with size options to 100% like so.

        return Chartjs::build()
            ->name("UserRegistrationsChart")
            ->size(["width" => '100%', "height" => '100%'])
            ->...

The goal is, that the chart is just fitting into it's container (that is of variable size in various browser sizes).

But the chart always renders as a box of 480px x 480px :(
grafik

What am I doing wrong?
Or better: How to get the cart to just render to 100% x 100% ???

@peterthomson
Copy link
Member

Unfortunately, ChartJS is a bit fussy about responsiveness and relative percentage sizes. The reason being that the JavaScript needs a "canvas" size to target the initial render.

I'll have a dig around and see how we can make the docs and/or php helper code more obvious.

But if you're looking for a quick fix, you can declare a static size that makes basic sense for most of your use cases and then use optionsRaw() to pass in the responsiveness instructions from here: https://www.chartjs.org/docs/latest/configuration/responsive.html

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants