Allow styles to be defined in CSS
Hello
Please consider the following enhancement. More often than not you need a consistent look for your whole page including charts. This includes common font family, font size, etc. For many reasons these style are usually defined in CSS, not in JavaScript. Highcharts styles are defined in JavaScript which creates a problem - you cannot create common set of styles for your page that includes charts.
An example of why this is needed is mobile and desktop version of the same page. We would use different CSS to make font bigger on mobile devices. Another example - print version of the page. We would use "@media print" CSS rule to define printer-friendly styles and want charts to inherit these styles.
It would be great if your charts supported styling through CSS. To be more specific, it would be great if I could define all styles in CSS including series colors, font family, size, color and etc.
Thanks,
Anatoly
tolya26
shared this idea
This is implemented in Highcharts 5, see http://www.highcharts.com/docs/chart-design-and-style/style-by-css
-
Ryan
commented
Me again,
I've come up with a solution myself to enable me to declare the colours in css and rip them out using javascript. I didn't like the idea of having to change a js file everytime I wanted to change something trivial such as a colour.
I've blogged about it at the following link:
http://ryansouthgate.com/2015/07/27/using-javascript-to-get-css-properties/ -
Ryan
commented
Just wondering if there's been any movement on this request?
I have just come across this whilst trying to search for the exact same functionality -
zac
commented
The VML problem is understandable, but how long will support for VML really be necessary? True CSS support is really the only significant flaw I see in an otherwise great product.
Maybe some kind of flag config option: "useCSS" could automatically disable all programatically applied styles and instead attach an appropriate class to each element so they can be targeted with CSS.
-
Anonymous
commented
I agree. This causes a problem when the designers need to change the format but are not familiar with JavaScript.
-
> you cannot create common set of styles for your page that includes charts
You can use a Highcharts theme. See http://api.highcharts.com/highcharts#Highcharts.setOptions()
It solves the problem of shared design between all charts in the page, and even separate mobile styles. But not print styles.
We are constantly considering improvements, including true CSS support. One problem is that the CSS would have to be programmatically parsed by Highcharts and converted to VML-compatible CSS or attributes for the VML browsers.