Home Forums Chart Support Different colors for labels

Different colors for labels

Viewing 2 posts - 1 through 2 (of 2 total)
  • #35118


    I want to give different colors to labels.

    Use Case:
    I have y axis from -100 to 100 spaced by 10 (-100, -90, -80 … 90, 100).

    Currently all labels are of color ‘#000’

    What I want to do ?
    Give red color to all y axis labels less than 0 and ‘#fff’ to all y axis labels more than 100.



    Setting font color of individual axis labels is not possible as of now. However, you can replace axis label with stripline label and set the color of each individual label using labelFontColor property as shown in the code snippet below –

    function changeAxisLabelColor(chart) {
        var dps;
        for(var i = 0; i < chart.data[0].dataPoints.length; i++){
            dps = chart.data[0].dataPoints[i];
                chart.axisX[0].addTo("stripLines", { value: dps.x, label: dps.label, labelPlacement: "outside", labelBackgroundColor: "white", color: "transparent", labelFontColor: dps.labelFontColor });

    Please take a look at this JSFiddle for complete working code.

    Setting color of individual axis label

    Indranil Deo
    Team CanvasJS

Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.