[HN Gopher] Responsive bar charts in HTML and CSS
___________________________________________________________________
Responsive bar charts in HTML and CSS
Author : sippndipp
Score : 36 points
Date : 2024-07-12 20:17 UTC (2 hours ago)
(HTM) web link (9elements.com)
(TXT) w3m dump (9elements.com)
| esafak wrote:
| An article about responsive bar charts without them? (Firefox)
|
| I'm not hip enough to find this funny.
| contravariant wrote:
| We live in an era where people will unironically tell you your
| article written in html/css might be a bit difficult to include
| on their website.
| kylebenzle wrote:
| Are you saying the interavtive code snippies are not what you
| want? This article is great and I've needed something like this
| in the past.
|
| What do you mean that there are "without charts?"
| Sn0wCoder wrote:
| The very first chart is a 'bar' chart running horizontally, not
| sure what's missing (Firefox 127.0.2 64-bit). There are code
| examples down below....
| itishappy wrote:
| It's an image. None of the charts are responsive charts in
| HTML and CSS.
|
| I didn't even notice the CodePen at first because it doesn't
| load automatically (instead displays a cropped and zoomed
| image).
| Sn0wCoder wrote:
| You are correct they are images besides the CodePen, I did
| not inspect them before commenting (hope the images is at
| least the output of the code). Guessing it must have
| something to do with the companies hosting platform tools
| and authoring code to it but have no idea why.
| nhggfu wrote:
| "While responsive and accessible SVGs are possible, they require
| manual client-side JavaScript logic"
|
| an oxymoron, given that many assistive devices don't run JS [eg
| text-browsers like lynx]
| arp242 wrote:
| Almost all commonly used assistive devices support JavaScript,
| and have for years.
|
| Lynx is not a commonly used assistive device.
| n2e wrote:
| "given that many assistive devices don't run JS [eg text-
| browsers like lynx]"
|
| an oxymoron, given that many assistive devices don't cooperate
| with any of the web or HMI accessibility guidelines at all [eg
| my wheelchair]
| green-eclipse wrote:
| Why are all these responsive charts displayed as images? Are they
| not proud of their work?
| xnx wrote:
| Actual live example of said charts:
| https://codepen.io/molily/pen/JjqgxVR
| sings wrote:
| I've been using a similar technique to display our poll data[1]
| for several years, although without using grid. If you can
| measure the text because you know which font will be used, and
| store the widths of various characters, you can take a little
| more control over layout too, even while rendering server-side.
|
| I also started writing a simple responsive SVG charting
| library[2], but the author is right in that there are some fluid
| layouts that are just impossible to realise with SVG at the
| moment.
|
| [1]: https://poll.lowyinstitute.org/report/2024/global-powers-
| and...
|
| [2]: https://stephenhutchings.github.io/shown/
___________________________________________________________________
(page generated 2024-07-12 23:00 UTC)