search

ffoodd / chaarts

Charts with HTML & CSS
https://ffoodd.github.io/chaarts
MIT License
126 stars 6 forks source link

Ability to remove the chart background #110

Closed nhoizey closed 11 months ago

nhoizey commented 11 months ago

If we now the contrast will be enough for accessibility, it would be great to be able to remove the background to make the graph more "embedded" in the page content.

ffoodd commented 11 months ago

Hi there, Thanks for opening issues :heart:

Regarding this one, the background is mandatory to visually hint about scrollable regions, and it needs to be a solid color (no transparency).

I made two changes to improve the customization and potential troubles:

  1. the bakground now depends on the tabindex attribute on .chaarts-container, which is added or removed using JavaScript on oad, resize and style switcher trigger — another thing to make obvious in the docs!
  2. I inrroduced a new --scrollable-background property on .chaarts-container, which is used as solid background color and mapped to current background color: from now on, you may specify a custom background color by overriding this custom property.

That's not perfect, but for now I can't think of a better way to handle this.

nhoizey commented 11 months ago

I don't understand what you mean about the scrollable reagion. The graph in my page is not scrollable, it scroll with the page.

Anyway, I just updated the CSS code, and I don't have a background color anymore. 😅

If I add style="--scrollable-background: #ff0000" to the <div class="chaarts-container">, it doesn't change anything.

ffoodd commented 11 months ago

Oh my, I just realize it's not documented.

Containers are able to display a visual hint when they are scrollable. Even if it's in the table mode only (that is, without the charts styles, when one disables them using the switch before the charts).

I actually have a script to add tabindex="0" on charts containers when their width is smaller than the table width.

The --scrollable-background custom prop only applies then, when the container has a tabindex attribute.

The background was previously applied even on non scrollable containers, which was this issue origin.

Did I made what's going on clearer 😅 ?

nhoizey commented 11 months ago

It's clearer indeed, thanks!