title: Chart.js change label color
body: <p>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 <a href="http://headsocial.com:8080/upload/145448587471822e0922d67c9dd6aae46d70bfeef1623.png" rel="nofollow">http://headsocial.com:8080/upload/145448587471822e0922d67c9dd6aae46d70bfeef1623.png</a>, but I want to change the color to grey currently it is showing like orange</p>
  
  <pre><code>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 &gt; 2 * Math.PI) {
                      normalizedAngle -= (2 * Math.PI)
                  }
  
                  if (normalizedAngle &lt; (Math.PI * 0.4) || (normalizedAngle &gt; Math.PI * 1.5))
                      ctx.textAlign = "start";
                  else if (normalizedAngle &gt; (Math.PI * 0.4) &amp;&amp; (normalizedAngle &lt; Math.PI * 0.6)) {
                      outerEdge.y += 5;
                      ctx.textAlign = "center";
                  }
                  else if (normalizedAngle &gt; (Math.PI * 1.4) &amp;&amp; (normalizedAngle &lt; Math.PI * 1.6)) {
                      outerEdge.y - 5;
                      ctx.textAlign = "center";
                  }
                  else
                      ctx.textAlign = "end";
  
                  ctx.fillText(segment.label, outerEdge.x, outerEdge.y);
  
              })
              done();
          }
      });
  
          });
      }
  }
  </code></pre>