In apache echarts, when rendering an svg, we need to provide some dimensions. This is required for svg (SSR) whereas client-side rendering can have automatic sizing based on the DOM container.

Then, perhaps we can modify the generated svg (like we are doing with adding the unique ids).

We could add:

width="100%" height="100%"

and set preserveAspectRatio:

https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/preserveAspectRatio

and then the fullscreen styling can be in the MediaWiki/extension css, with a css class on the div container that wraps the svg.

@DTorsani-WMF what would a sensible default width and height be for a chart that appears in full screen and not in full screen?

@Jdlrobson You can review default design parameters for chart sizing in T375312: Define sizing options and responsive behavior for charts. Once you have these parameters within the different chart types, let's review together to refine as needed.

From @Jdlrobson :

• By default make the chart 100% width, and 448px height. If both must be expressed in terms of pixels, I'd suggest using 1000px as that's consistent with the maximum content size on Vector 2022. For non-fullscreen use 512px x 448px.
• In Data namespace if height is present, use that instead of the default. Ignore the width option. Don't allow that to be modified.
• Default to full screen
• Update the parser function so it only accepts a fullscreen parameter and doesn't accept width or height parameters e.g.

{{#chart:1993 Canadian federal election.chart|fullscreen=true}}
{{#chart:1993 Canadian federal election.chart|fullscreen=true|width=100}} <!-- no effect on width not supported -->
{{#chart:1993 Canadian federal election.chart|fullscreen=true|height=100}} <!-- no effect on height not supported -->

Would recommend we use keyword match for boolean params like "fullscreen" i.e. {{#chart:1993 Canadian federal election.chart|fullscreen}}

As defined in T375312, we should answer:

Might someone want to display two charts side by side on larger screens? This would be done as a part of the template and within page containers, not the charts themselves. Ideally, the full width option would fit inside side-by-side containers to make this work. We should test this in T375240: Limit size of charts to make sure this works as intended and responds gracefully down to smaller screens.

My current understanding of this ticket, is that @aude has added versioning support to charts in https://gitlab.wikimedia.org/repos/mediawiki/services/chart-renderer/-/merge_requests/27/diffs so that we can make this change and also
I talked with @aude today and we renamed "fullscreen" to "fullwidth" as charts might appear inside an infobox, and we believe the intention is to take the full width of the parent container - not the screen :-)

Change #1079009 had a related patch set uploaded (by Aude; author: Aude):

[mediawiki/extensions/Chart@master] Add fullwidth param and remove width / height params

https://gerrit.wikimedia.org/r/1079009

Change #1079009 merged by jenkins-bot:

[mediawiki/extensions/Chart@master] Remove chart width and height params

https://gerrit.wikimedia.org/r/1079009

Change #1079032 had a related patch set uploaded (by Jdlrobson; author: Jdlrobson):

[mediawiki/extensions/Chart@master] Limit charts to container size

https://gerrit.wikimedia.org/r/1079032

Change #1079032 merged by jenkins-bot:

[mediawiki/extensions/Chart@master] Limit charts to container size

https://gerrit.wikimedia.org/r/1079032

Change #1079553 had a related patch set uploaded (by Jdlrobson; author: Jdlrobson):

[mediawiki/extensions/Chart@master] Update example chart so it doesnt container width or height

https://gerrit.wikimedia.org/r/1079553

Change #1079553 merged by jenkins-bot:

[mediawiki/extensions/Chart@master] Update example chart so it doesnt container width or height

https://gerrit.wikimedia.org/r/1079553