Chart.js text color

So, I use chart.js http://www.chartjs.org/docs/ and I can’t change the color of the text below

for example: “January February March April May June July” and the numbers on the left

I tried all these options: scaleFontColor: "#FFFFFF" pointLabelFontColor: "#FFFFFF"

my full code is:

<script> var randomScalingFactor = function(){ return Math.round(Math.random()*100)}; var lineChartData = { labels : ["January","February","March","April","May","June","July"], datasets : [ { label: "My Second dataset", fillColor : "rgba(255, 89, 114, 0.6)", strokeColor : "rgba(51, 51, 51, 1)", pointColor : "rgba(255, 89, 114, 1)", pointStrokeColor : "#fff", pointHighlightFill : "#fff", pointHighlightStroke : "rgba(151,187,205,1)", maintainAspectRatio: false, scaleFontColor: "#FFFFFF", pointLabelFontColor : "#FFFFFF", pointLabelFontSize : 30, data : [1,2,10,7,3,1] } ] } window.onload = function(){ var ctx = document.getElementById("canvas").getContext("2d"); window.myLine = new Chart(ctx).Line(lineChartData, { responsive: true }); } </script> 
+9
source share
3 answers

scaleFontColor used to change the color of labels.

Instead of putting it in your data sets, you should add it as a parameter to your function, for example:

 window.myLine = new Chart(ctx).Line(lineChartData, { responsive: true, scaleFontColor: "#FFFFFF" } }); 
+6
source

Ist working code:

 Chart.defaults.global.defaultFontColor = "#fff"; 

Good luck :)

+15
source

I found a problem with Kenan

 <script> var randomScalingFactor = function(){ return Math.round(Math.random()*100)}; var lineChartData = { labels : ["January","February","March","April","May","June","July"], datasets : [ { label: "My Second dataset", fillColor : "rgba(255, 89, 114, 0.6)", strokeColor : "rgba(51, 51, 51, 1)", pointColor : "rgba(255, 89, 114, 1)", pointStrokeColor : "#fff", pointHighlightFill : "#fff", pointHighlightStroke : "rgba(151,187,205,1)", maintainAspectRatio: false, data : [1,2,10,7,3,1] } ] } window.onload = function(){ var ctx = document.getElementById("canvas").getContext("2d"); window.myLine = new Chart(ctx).Line(lineChartData, { responsive: true, scaleFontColor: "#FFFFFF" } )}; </script> 

it was not an ordinary data type, and I had to set the brackets correctly!

Thanks a lot, it looks great.

-1
source

Source: https://habr.com/ru/post/982568/


All Articles