This would be very useful. In articles with infobox templates e.g. https://it.wikipedia.org/wiki/Nienburg/Weser, graphs tend to "clear" instead of "floating" next to the infobox.

Current behaviour (on Desktop):

Expected behaviour:

Allowing smaller sizes (not necessarily arbitrary, custom sizes - a fixed "thumbnail / preview" size with the option to expand it to fullscreen would be enough) would not only help with infoboxes or the example mentioned above, but also in cases where the chart is not meant to be studied in detail, but only included for illustrative purposes, like most charts in https://de.wikipedia.org/wiki/Stochastische_Analysis : Replacing those with the new charts in fullscreen mode would drastically reduce the readability of the article.

I would also very much like to have an option to make it a thumbnail on the side too. I was tried adding a pie chart to https://en.wikipedia.org/wiki/Washington_University_in_St._Louis in the budget section, but having it take up almost the entire page cuts back at readability more than it adds to illustration.

Is it within the scope of this issue to enable charts to be included in <gallery> s? For an example, see https://en.wikipedia.org/wiki/Wikipedia:WikiProject_Data_Visualization#Examples – I'd like to include that chart in the gallery next to the images.

In T376845#10857463, @Prototyperspective wrote:

Is it within the scope of this issue to enable charts to be included in <gallery> s? For an example, see https://en.wikipedia.org/wiki/Wikipedia:WikiProject_Data_Visualization#Examples – I'd like to include that chart in the gallery next to the images.

I would say no, given that galleries are a specific feature designed for images. It's a valid request but outside the scope of this task and unlikely to be prioritized.

In T376845#10638932, @Ferdi2005 wrote:

This would be very useful. In articles with infobox templates e.g. https://it.wikipedia.org/wiki/Nienburg/Weser, graphs tend to "clear" instead of "floating" next to the infobox.

Current behaviour (on Desktop):	Expected behaviour:

Next to the infobox template, not under it leaving blank space.

I think I fixed it for you:
https://it.wikipedia.org/w/index.php?title=Nienburg%2FWeser&diff=145107929&oldid=144041306

Also note it might be a good idea to create
{{#chart:Population.Bar.chart}}
And then you can use it in many articles just by defining a data source:
{{#chart:Population.Bar.chart|data=Nienburg/Weser Demografia.tab}}
You can also do that in a template and provide data as a parameter. Template will make it easier to change the chart. For example the community could later decide all population charts should be shown as line charts. You would then change the template and you are done.
{{#chart:Population.Bar.chart|data={{{tab}}} }}
{{#chart:Population.Line.chart|data={{{tab}}} }}

This request seems to have been mostly solved through placing the chart into a template with configurable widths.

In T376845#10922949, @Seddon wrote:

This request seems to have been mostly solved through placing the chart into a template with configurable widths.

Doing this, we often end up with super thin graphs since the height cannot be changed.

In T376845#10922949, @Seddon wrote:

This request seems to have been mostly solved through placing the chart into a template with configurable widths.

Yeah, that's gross. I've done it because I've needed to in the past, never because I wanted to. People want a native solution (and I'm sure skins would better support a native solution as well).

When we looked at this before although it looked like it should be straightforward we found it was very challenging to support this in a way such that charts on a mobile device were actually readable. I think it would be helpful if people could share example URLs to charts which are working around this or would benefit from this (particularly where the axis become unreadable on mobile devices). Having more test cases will be helpful for ultimately getting this addressed.

Well, prior the workaround I used for Graphs which had a similar issue was {{image frame}}. It never ever worked the way I really wanted it to (which was just "magical").

For dealing with mobile, I guess I'm less thinking of the image CSS direction (shrink, perhaps to some minimum width) and more the table CSS direction (overflow-x). I suppose you could combine them with setting a min-width.

I suppose less for me either way is it a concern of "I want to set widths" and more "I want these to take care of themselves from the perspective of CSS and friends". A template that takes care of widths has to be designed to do the CSS part.... and to do it consistently everywhere.

We considered a new boolean option: fullwidth but it was unclear how this would work intuitively inside infoboxes.

In the context particularly of infoboxes, I actually don't see an issue. I'm kind of wondering what the questions in the description are intending.

In T376845#11129252, @Jdlrobson-WMF wrote:

I think it would be helpful if people could share example URLs to charts which are working around this or would benefit from this (particularly where the axis become unreadable on mobile devices). Having more test cases will be helpful for ultimately getting this addressed.

I cannot provide direct urls because graph usage is mostly through (multiple imbricated) templates, but here are the use cases where specifying width while the aspect ratio remains sane is important:

1. infoboxes (this currently works AFAIK, but please check multiple wikis)
2. Inside {{multiple image}} for some reason this *doesn't work* on rowiki, I'll try to get you an example
3. in short articles with big infoboxes, where the graphs end up on the left of the infobox in desktop view. I know desktop is becoming less and less used, but heavy editors use it even on mobile devices. Example: https://ro.wikipedia.org/wiki/Albano_Vercellese

I would further split the last use-case in two:

• some templates permit specifying width and height, mostly for historical reasons
• some pages did not specify any dimensions and would just benefit from the page's in-line styles to have the graph decently sized. This is the use case that seems the most relevant to me in the current world.

in short articles with big infoboxes, where the graphs end up on the left of the infobox in desktop view.

Thanks for the example. I assume in this resolution we'd want the chart to become full width? Not sure right now if this is a template issue or the chart itself. (Note getting the responsive behaviour right here is the main challenge)

Workarounds:
With some CSS hacks, here's what I was able to achieve on Russian Wikipedia: Template:WikidataChart (Lua, CSS). I managed to limit charts width (which otherwise stretch to infinity, producing ugly white space), but it's impossible to do that after some minimal amount about 700-800 px (depends on something?). Currently there's a hack utilizing transform: scale() to scale the graphs (as CSS zoom property messes up mouse events), but this doesn't allow arbitrary sizes (for example, you can't change aspect ratio without getting completely broken labels).

Bugs:
The default size for charts is monstruous, even with width: 800px limit. Ruwiki users are massively complaining about them, calling them ugly and gigantomanic.
They take especially much space when using large browser zoom (e.g. 150% display size). I've noticed that when changing the browser zoom in any direction, charts stay visually the same size, contrary to anything else from images to tables which become smaller when scaled down and larger when scaled up. I don't think this is intendend, and even if it is, please change it.
This is Andy has reported that on mobiles "the graph is able to shrink horizontally to fit into screen", but stays the same vertically and therefore still doesn't fit.

In T376845#11132545, @Jdlrobson-WMF wrote:

in short articles with big infoboxes, where the graphs end up on the left of the infobox in desktop view.

Thanks for the example. I assume in this resolution we'd want the chart to become full width? Not sure right now if this is a template issue or the chart itself. (Note getting the responsive behaviour right here is the main challenge)

I would personally prefer if we could display it next to the infobox and reduce the height accordingly, but I guess the result depends on the available space.

Even with resizing image container templates like image frame, the pie charts at least have way too much whitespace below them. See:

Does anyone know of a not-too-messy workaround to fix this?