Chartjs-Is there a way with chart.js v4 to find out the default assigned colors per dataset by looking in the chart object in javascript?

by

0👍

✅

So it turns out I was setting a borderColor attribute to one of my datasets, which when set seems to disable chart.js from auto-coloring the rest of the datasets.

See here: https://www.chartjs.org/docs/latest/general/colors.html#dynamic-datasets-at-runtime

const ctx = document.getElementById("myChart");
const myChart = new Chart(ctx, {
  type: 'line',
  data: {
    labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
    datasets: [{
        label: '# of Votes 1',
        data: [12, 19, 3, 5, 2, 3]
      },
      {
        label: '# of Votes 2 ',
        data: [10, 15, 13, 8, 4, 6],
        borderColor: "green"
      }
    ]
  },
  options: {}
});

console.log(myChart.data.datasets[0].borderColor)
<script src="https://npmcdn.com/chart.js@4.2.1/dist/chart.umd.js"></script>
<div class="myChartDiv">
  <canvas id="myChart" width="400" height="400"></canvas>
</div>

Chart.js do have an option to forceOverride the color and force each dataset to get a color, but as it says, this forceOverride option, overrides the custom color I was giving to one dataset.

const ctx = document.getElementById("myChart");
const myChart = new Chart(ctx, {
  type: 'line',
  data: {
    labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
    datasets: [{
        label: '# of Votes 1',
        data: [12, 19, 3, 5, 2, 3]
      },
      {
        label: '# of Votes 2 ',
        data: [10, 15, 13, 8, 4, 6],
        borderColor: "green"
      }
    ]
  },
  options: {
    plugins: {
      colors: {
        forceOverride: true
      }
    }
  }
});

console.log(myChart.data.datasets[0].borderColor)
<script src="https://npmcdn.com/chart.js@4.2.1/dist/chart.umd.js"></script>
<div class="myChartDiv">
  <canvas id="myChart" width="400" height="400"></canvas>
</div>

There are plugins that can handle this situation, such as "autocolors", but I found that when viewing the borderColor property for the dataset it was returning an array of colors for every point of the dataset (i.e. if some points overlapped, the corresponding element in the array would be a different color).

In then end I decided to supply my own color palette and make sure that every dataset was assigned their own borderColor as I was generating the datasets.

0👍

With chart.js v4, the chart configuration has changed slightly, so accessing the default colors require a different approach. Instead of looking for the borderColor attribute, you can just access the backgroundColor attribute of the dataset object to get the default colors that were assigned to each dataset.

Best of luck.

0👍

You need to get the value from chartInstance.data.datasets instead of chartInstance.datasets then it works just fine:

const ctx = document.getElementById("myChart");
const myChart = new Chart(ctx, {
    type: 'line',
    data: {
        labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
        datasets: [{
            label: '# of Votes',
            data: [12, 19, 3, 5, 2, 3]
        }]
    },
    options: {
    }
});

console.log(myChart.data.datasets[0].borderColor)
<script src="https://npmcdn.com/chart.js@4.2.1/dist/chart.umd.js"></script>
<div class="myChartDiv">
  <canvas id="myChart" width="600" height="400"></canvas>
</div>

In your case that would become chart.chart.data.datasets[0].borderColor

Leave a comment