简体   繁体   中英

Chart.js doughnut text colors

How do you change the doughnut text color and doughnut 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 anything else I've tried. What property, for donuts specifically, will fix this?

在此输入图像描述

I'd like the text color to be different from the black color in the chart.

Edit:

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

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

The question is, how do you change the font color inside the doughnut?

Edit 2:

Realized the text color inside the donuts, while affected by the secondary color, was actually painted using canvas.fillText(). As such, all I needed was to add .fillStyle = "whatever" and it works.

Change

    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 the available options here http://www.chartjs.org/docs/#getting-started-global-chart-configuration

For you color text you can add this option

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

Change style="color: red" by the color you want

Realized the text color inside the donuts, while affected by the secondary color, was actually painted using canvas.fillText(). As such, all I needed was to add .fillStyle = "whatever" and it works.

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM