[Chartjs]-Change color on labels in chart.js

by

2👍

✅

Not sure if you meant the labels in the legend or in the tooltip but here are the options for both of them:

const data = {
  labels: [
    'New',
    'To Do',
    'In Progress',
    'Resolved'
  ],
  datasets: [{
    label: 'WDC',
    data: [300, 50, 100, 20],
    backgroundColor: [
      'rgb(126, 191, 241)',
      'rgb(255, 159, 64)',
      'rgb(255, 255, 0)',
      'rgb(160, 160, 160)'
    ],
    borderColor: [
      'rgb(126, 191, 241)',
      'rgb(255, 159, 64)',
      'rgb(255, 255, 0)',
      'rgb(160, 160, 160)'
    ],
    backgroundColor: [
      'rgb(126, 191, 241)',
      'rgb(255, 159, 64)',
      'rgb(255, 255, 0)',
      'rgb(160, 160, 160)'
    ],
    hoverOffset: 4
  }]
};
const config = {
  type: 'pie',
  data: data,
  options: {
    responsive: true,
    maintainAspectRatio: false,
    layout: {
      padding: 20
    },
    plugins: {
      tooltip: {
        bodyColor: 'blue'
      },
      legend: {
        labels: {
          color: 'blue',
        },
        position: 'top'
      }
    }
  }
};
const myChart = new Chart(
  document.getElementById('myChart'),
  config
);
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<div id="wdc_canvas">
  <canvas id="myChart"></canvas>
</div>

Leave a comment