Clever Geek Handbook

Donut text color Chart.js

How do you change the donut text color and donut filler colors separately? I have something like this:

var  color = [ "#3F9F3F", "#FFFFFF" ];
var chartData =  {
  label :  myLabels, 
  data : myData,
  colors : color
};

The second color attribute overrides everything I've tried. What property, specifically for donuts, would fix this?

enter image description here

I want the text color to be different from black in the chart.

Edit:

This is a jsfiddle I found that shows a basic diagram.

http://jsfiddle.net/mayankcpdixit/6xV78/

The question is how to change the font color inside the donut?

Edit 2:

Implemented the color of the text inside the donuts, while it affects the secondary color, was actually written using canvas.fillText (). So all I needed was to add .fillStyle = "whatever" and it works.

+3


source to share


2 answers


Implemented the color of the text inside the donuts, while it affects the secondary color, was actually written using canvas.fillText (). So all I needed was to add .fillStyle = "whatever" and it works.



0


source


Edit

    var myPie = new Chart(document.getElementById("canvas").getContext("2d")).Doughnut(pieData,{percentageInnerCutout : 80});

by

    var myPie = new Chart(document.getElementById("canvas").getContext("2d")).Doughnut(pieData,doughnutOptions);


You can find all available options here http://www.chartjs.org/docs/#getting-started-global-chart-configuration

For colored text you can add this option

var doughnutOptions= {
 scaleLabel: '<p style="color: red"><%=value%></p>'
}

Change style="color: red"

to the color you want

0


source






More articles:


All Articles