Docs: Gigantic chart examples on larger resolutions

[eirikove]

Documentation Is:

• Missing or needed?
• Confusing
• Not sure?

Please Explain in Detail...

Possibly a duplicate, but;

It's just quite annoying that the examples take up the such huge parts of the screen, forces me to scroll a lot to get down to the programmatical information I'm looking for.

(I'm on a 27" 2560×1440 monitor on Google Chrome, Arch Linux)

On typically rectangular height/width ratioed charts (such as Line and Bar), it's actually kind of demanding to read the chart because of the distance between the ticks

Charts that usually have more of a square height/width ratio are just pushing the page height a lot.

Your Proposal for Changes

I notice the height seems automatically applied based on the charts' aspect ratios, but they really don't need to be full width on large screens either.
I think the resizing works nice up to a point around 1600-1700 pixels window width, at which point they start to become annoyingly large.

I propose doing some breakpoint-based size calculation and add breakpoints beyond 1920 pixels width,
or perhaps keep the aspect ratios as-is and set a max-width on the container, to stop the charts from growing with the window size.

Example

No response

[igorlukanin]

I'd like to fix this but I don't quite understand how fenced code blocks starting with ```js chart-editor end up rendered as chart views + editor tabs. Searched through the code but didn't find anything remotely related. Must have to do with the Markdown renderer but...

@LeeLenaleee Could you please nudge me in the right direction?

[kurkle]

@igorlukanin this comes from the vuepress theme styles, which can and have been changed:
#9549

[igorlukanin]

@kurkle Oh, could have though about this 😄 Submitted #10447.