CODEWITHSUNDEEP
javascripthtmlcsssvghighcharts
wf4
wf4

Reputation: 3827

remove inline styles from svg in highcharts

I have recently started looking at Highcharts for a project and so far I have managed to get the charts I need but the only problem I have is the excessive markup bloat which is created along with the charts. To give an example:

<text style="color: white; font-family: Verdana, Helvetica, sans-serif; font-size: 12px; position: absolute; fill: white;" x="1288" y="252" zIndex="2">
<tspan style="font-weight: bold;" x="1288">
<text style="color: white; font-family: Verdana, Helvetica, sans-serif; font-size: 12px; position: absolute; fill: white;" x="1288" y="452" zIndex="2">
<tspan style="font-weight: bold;" x="1288">

This represents just 2 objects in the chart and each time you can see the color, font, position and fill are added as an inline styles...

Having not had too much exposure to SVG, is this a requirement? What I would like to be able to do would be to add a class to the text, say 'hc-txt' then I can set the color, font, position and fill in my CSS file.

e.g. 

<text class="hc-txt" x="1288" y="252">
<tspan x="1288">
<text class="hc-txt" x="1288" y="452">
<tspan x="1288">

Having looked in the src file, I have been able to shorten the prefix from highcharts- to hc- which also helps tidy up the markup a little but changing the way in which these objects are created, am I being over ambitious?

Thanks in advance,

Will.

Upvotes: 0

Views: 3053

Answers (2)

wf4
wf4

Reputation: 3827

Highcharts 5 introduces styled mode! you can now style the charts using css which will remove the need for all of the inline styles. Style by CSS - highcharts.com

Upvotes: 2

Adam Moszczyński
Adam Moszczyński

Reputation: 3566

Adding class attribute to the element should work - please check:

http://www.w3.org/TR/SVG/styling.html#StylingWithCSS

and specifically this one:

http://www.w3.org/TR/SVG/styling.html#ClassAttribute

Upvotes: 2

Related Questions