Chart.js change label color

Question

I am using chart.js library to make polar chart but not able to change the color of the label please help me how can I change the color of the label. My chart look like http://headsocial.com:8080/upload/145448587471822e0922d67c9dd6aae46d70bfeef1623.png, but I want to change the color to grey currently it is showing like orange

function show_polar_chart_data1(data, id){
        var jsonData = jQuery.parseJSON(data);
        var data = [
        {
            value: jsonData.IDENTITY_Avg,
            color: "#8258FA",
            highlight: "#8258FA",
            label: "IDENTITY("+jsonData.IDENTITY+")"
        },
        {
            value: jsonData.ROLE_Avg,
            color: "#34ED13",
            highlight: "#34ED13",
            label: "ROLE("+jsonData.ROLE+")"
        },
        {
            value: jsonData.ATTITUDE_Avg,
            color: "#FFFF00",
            highlight: "#FFFF00",
            label: "ATTITUDE("+jsonData.ATTITUDE+")"
        },
        {
            value: jsonData.AGILITY_Avg,
            color: "#FF0000",
            highlight: "#FF0000",
            label: "AGILITY("+jsonData.AGILITY+")"
        },
        {
            value: jsonData.FAIRNESS_Avg,
            color: "#00FFFF",
            highlight: "#00FFFF",
            label: "FAIRNESS("+jsonData.FAIRNESS+")"
        },
        {
            value: jsonData.CONFLICT_Avg,
            color: "#EE9A4D",
            highlight: "#EE9A4D",
            label: "CONFLICT("+jsonData.CONFLICT+")"
        }

    ];

    var ctx = document.getElementById("chart").getContext("2d");
    var polarChart = new Chart(ctx).PolarArea(data, {
        scaleOverride: true,
        scaleStartValue: 0,
        scaleStepWidth: 1,
        scaleShowLabels: false,
        scaleSteps: 10,

        onAnimationComplete: function () {
            this.segments.forEach(function (segment) {
                var outerEdge = Chart.Arc.prototype.tooltipPosition.apply({
                    x: this.chart.width / 2,
                    y: this.chart.height / 2,
                    startAngle: segment.startAngle,
                    endAngle: segment.endAngle,
                    outerRadius: segment.outerRadius * 2 + 10,
                    innerRadius: 0
                })

              var normalizedAngle = (segment.startAngle + segment.endAngle) / 2;
                while (normalizedAngle > 2 * Math.PI) {
                    normalizedAngle -= (2 * Math.PI)
                }

                if (normalizedAngle < (Math.PI * 0.4) || (normalizedAngle > Math.PI * 1.5))
                    ctx.textAlign = "start";
                else if (normalizedAngle > (Math.PI * 0.4) && (normalizedAngle < Math.PI * 0.6)) {
                    outerEdge.y += 5;
                    ctx.textAlign = "center";
                }
                else if (normalizedAngle > (Math.PI * 1.4) && (normalizedAngle < Math.PI * 1.6)) {
                    outerEdge.y - 5;
                    ctx.textAlign = "center";
                }
                else
                    ctx.textAlign = "end";

                ctx.fillText(segment.label, outerEdge.x, outerEdge.y);

            })
            done();
        }
    });

        });
    }
}

score 1 · Accepted Answer · answered Feb 03 '16 at 10:23

1

Just add

 ctx.fillStyle = 'black';

before your ctx.fillText...

answered Feb 03 '16 at 10:23

potatopeelings

40,709
7
95
119

thanks @potatopeelings. This is exactly what I want. Don't have reputation to do +1 – Manu Jain Feb 03 '16 at 12:11

score 0 · Answer 2 · edited May 23 '17 at 12:31

0

Have you tried adding:

scaleFontColor: "<the color you want to add>"

to the chart initialization like this:

var polarChart = new Chart(ctx).PolarArea(data, {
   scaleFontColor: "<the color you want to add>"
   ...

Check this SO answer: Change label font color for a line chart using Chart.js

edited May 23 '17 at 12:31

Community

1
1

answered Feb 03 '16 at 08:06

allu

381
1
8

I tried the same but it's not working..Actually when I set "scaleShowLabels: true" then it display the label in grey color but when I set the "propertyscaleShowLabels: false" then color automatically change to orange. I need to do this property false because I don't want Radar scale. – Manu Jain Feb 03 '16 at 08:11

Chart.js change label color

2 Answers2