Chart.JS change Text Color

by

5👍

✅

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>

Leave a comment