CODEWITHSUNDEEP
javascripthtmlcsshighcharts
Adalberto Navarrete
Adalberto Navarrete

Reputation: 33

highcharts: edit data labels style in css file

Is there a way to select the class highcharts-data-label and change the font size and color of the data labels like in the example below?

<g class="highcharts-data-labels highcharts-tracker" visibility="visible" zIndex="6" transform="translate(42,10) scale(1 1)" style="">
    <g zIndex="1" style="cursor:default;" transform="translate(54,146)">
        <text x="3" y="15" style="font-family:&quot;Lucida Grande&quot;, &quot;Lucida Sans Unicode&quot;, Verdana, Arial, Helvetica, sans-serif;font-size:11px;font-weight:normal;color:#2f7ed8;fill:#2f7ed8;" zIndex="1">
            <tspan x="3">0.8</tspan>
        </text>
    </g>
</g>

I'm using a software that automatically generates highcharts and minifies the js files, so if I could that in the css file I would override the default behavior for all the generated charts.

Upvotes: 3

Views: 1883

Answers (1)

Rachel Gallen
Rachel Gallen

Reputation: 28563

add this into your highcharts code to change your labels to green (you can change them to any color) See this fiddle for a demo

labels: {
         formatter: function () {
                     {
                        return '<span style="fill: green;">' + this.value + '</span>';
                    }
                }
            }

Upvotes: 3

Related Questions