CODEWITHSUNDEEP
javascriptchart.js
downrep_nation
downrep_nation

Reputation: 452

Chart.js Text color

So im using chart.js http://www.chartjs.org/docs/ and i cant change the color of the text in the bottom

ex: "January","February","March","April","May","June","July" and the numbers in the left side

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

my full code:

<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>

Upvotes: 19

Views: 57337

Answers (5)

HitEmUp
HitEmUp

Reputation: 404

The working code is this:

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

Have fun :)

Upvotes: 33

ellipsenotcircle
ellipsenotcircle

Reputation: 126

For chart.js 3.x migration, text-labels on x and y axis are set this way:

Set options to the following:

scales: {
  x: {
    ticks: {
      color: "red"
    }
  },
  y: {
    ticks: {
      color: "green"
    }
  }
}

similar solution is found if you want to change color of grid lines, inside of x / y value write

grid: {
  color: "white"
}

Upvotes: 9

Andr&#233; Claesson
Andr&#233; Claesson

Reputation: 168

In Chart.js v3 it can be achieved with:

Chart.defaults.color = "#ff0000";

Upvotes: 13

downrep_nation
downrep_nation

Reputation: 452

i found the issue together 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 wasnt a normal datatype and i had to adjust the brackets properly!

thanks alot,looks great now.

Upvotes: 0

Kenan
Kenan

Reputation: 114

scaleFontColor is used to change the color of the labels.

Instead of putting it in your datasets you should add it as a parameter in your function, like this:

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

Upvotes: 7

Related Questions