[Chartjs]-Configure Pie Chart Colors Using Chart.js and PHP

by

6👍

✅

It is possible to control the color of each slice in a pie/doughnut chart using the backgroundColor dataset property.

It looks like you were attempting to do this in your question, but here is a full working example so that you can leverage it for your needs.

var config = {
  type: 'doughnut',
  data: {
    datasets: [{
      data: [300, 50, 100, 40, 10],
      backgroundColor: [
        window.chartColors.red,
        window.chartColors.orange,
        window.chartColors.yellow,
        window.chartColors.green,
        window.chartColors.blue,
      ],
    }],
    labels: [
      "Red",
      "Orange",
      "Yellow",
      "Green",
      "Blue"
    ]
  },
  options: {
    responsive: true,
    legend: {
      display: true,
      labels: {
        padding: 20
      },
    },
    tooltips: {
      enabled: false,
    }
  }
};

Here is a working Codepen example.

Leave a comment