Cornerstone Charts and css variables

[bobbybosler]

Hello,

I was endeavoring to make my charts have a “dark mode” by using prefers-color-scheme and css variables, but I found that the Cornerstone Charts don’t support var() in their color fields. Is this something planned?

Also, it would be really nice if we could get some responsive styling ability in the charts, like the ability to click on the label and select sizes based on breakpoints. Currently turning off the “Maintain Ratio” button creates some buggy sizes, otherwise I would have just changed the ratio based on screen size. As a workaround, I had to create two different versions of the charts to show at different break points. Also, the “hide based on breakpoint” option isn’t in the customize tab, so I had to use the parent column to do this.

[marc_a]

Hey @bobbybosler,

Thanks for reaching out!

As our developer said, the current version of the Cornerstone Chart doesn’t support the CSS variables but that is something we can do down the line.

On the other hand, we’re glad that you’re able to find a workaround for your concerns.

Thank you.

[bobbybosler]

Followup question: is there any way to style specific parts of the Cornerstone Charts (CC) using CSS? I noticed CCs use the <canvas> element to display all of their data, and I am not sure where to start to see if the contents can be styled using CSS.

[charlie]

Hey good to hear from you. The output is entirely in the canvas element, which is 2D graphics and not style-able the same way as other elements. What are you trying to style? The tooltips or the legend? Eventually we are going to have an option to use HTML elements / Cornerstone Elements to be used for those two items in CC.

[bobbybosler]

I was hoping to style the y-axis labels to change color based on prefers-color-scheme. I’ve currently got them set to a medium gray that provides some contrast on white and dark background, but I was hoping to tweak them a little more to provide better contrast.

[tristup]

Hi @bobbybosler,

Regretfully, that option is not available right now.

Thanks

[charlie]

Yeah you definitely had the right idea with the CSS variables to achieve that. That’s a great feature for CS Charts we’ll definitely get that added in. Have a great day.