Chart.JS change Text Color

Question

I cannot figure out how to change the text color to white. I would like to change it for the x,y axis and the label at the top of the chart. I have looked at other posts on stack overflow and I feel like those posts are outdated and are for older versions of chart.js.

ChartJS Version: 3.3.2

CODE:

<canvas id="myChart" width="1000px" height="1000px"></canvas>
                    <script>
                        var ctx = document.getElementById('myChart').getContext('2d');
                        var myChart = new Chart(ctx, {
                            type: 'line',
                            data: {
                                <?php
                                echo "labels: [";
                                for ($i = 1; $i < $monthdays; $i++) {
                                    echo "'" . $i . "'" . ",";
                                }
                                echo "],";
                                ?>
                                //labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
                                datasets: [{
                                    color: 'rgb(255,255,255)',
                                    label: 'net volume of sales',
                                    data: [12, 19, 3, 5, 2, 3, 12, 19, 3, 5, 2, 3, 12, 19, 3, 5, 2, 3, 12, 19, 3, 5, 2, 3, 5, 5, 5, 5, 5],
                                    backgroundColor: [
                                        'rgba(255, 99, 132, 0.2)'

                                    ],
                                    borderColor: [
                                        'rgba(255, 99, 132, 1)'
                                    ],
                                    /*backgroundColor: [
                                        'rgba(255, 99, 132, 0.2)',
                                        'rgba(54, 162, 235, 0.2)',
                                        'rgba(255, 206, 86, 0.2)',
                                        'rgba(75, 192, 192, 0.2)',
                                        'rgba(153, 102, 255, 0.2)',
                                        'rgba(255, 159, 64, 0.2)'
                                    ],
                                    borderColor: [
                                        'rgba(255, 99, 132, 1)',
                                        'rgba(54, 162, 235, 1)',
                                        'rgba(255, 206, 86, 1)',
                                        'rgba(75, 192, 192, 1)',
                                        'rgba(153, 102, 255, 1)',
                                        'rgba(255, 159, 64, 1)'
                                    ],*/
                                    borderWidth: 1
                                }]
                            },
                            options: {

                                scales: {
                                    x: {
                                        grid: {
                                            display: false
                                        }
                                    },
                                    y: {
                                        grid: {
                                            display: false
                                        },
                                        beginAtZero: true
                                    }
                                }
                            }
                        });
                    </script>

The answer from Juergen Fink works. I just tried it https://stackoverflow.com/questions/37292423/chart-js-label-color — Justin, Jun 21 '21 at 02:38

score 5 · Accepted Answer · answered Jun 22 '21 at 21:00

This is in 3.3.2. Answer based on one provided by Juergen Fink in this thread stackoverflow.com/questions/37292423/chart-js-label-color

new Chart(document.getElementById("myChart"), {
    type: 'bar',
    data: {
      labels: ["Africa", "Asia", "Europe", "Latin America", "North America"],
      datasets: [
        {
          label: "Population (millions)",
          backgroundColor: ["#3e95cd", "#8e5ea2","#3cba9f","#e8c3b9","#c45850"],
          data: [2478,5267,734,784,433]
        }
      ]
    },
    options: {
      plugins: { 
      legend: {
        labels: {
          color: "white", 
          font: {
            size: 18
          }
        }
      }
    },
      title: {
        display: true,
        text: 'Predicted world population (millions) in 2050',
      },
  scales: {
      y: {  
        ticks: {
          color: "white",
          font: {
            size: 15, 
          },
          stepSize: 1,
          beginAtZero: true
        }
      },
      x: { 
        ticks: {
          color: "white", 
          font: {
            size: 14 
          },
          stepSize: 1,
          beginAtZero: true
        }
      }
    }
  }
});

canvas {
  background: grey;
}

<canvas id="myChart"></canvas>
<script src="https://cdn.jsdelivr.net/npm/chart.js@3.3.2/dist/chart.min.js"></script>

Chart.JS change Text Color

1 Answers1