0

Previously with chart.js v2, I could loop through the dataset object within the chart object and find out the default colors that were assigned. I then use these colors to color custom buttons elsewhere on my webpage.

With chart.js v2 I could find the color by looking for this attribute:

chart.datasets[index].borderColor

With chart.js v4, the borderColor attribute is not defined unless I had specifically chosen a color myself when adding the dataset.

I have tried expanding the chart object in the debug console and couldn't see where I would be able to read the auto-assigned chart colors. I am hoping someone can point me in the right direction.

Note, this is part of an angular app, and I am using ng2-charts to load chart.js. I intend to loop through the chart object to find the dataset colors in the html template.

Here is what the chart object looks like with v4: chart object

Moritz Ringler
  • 9,772
  • 9
  • 21
  • 34
gtl21
  • 1
  • 2

3 Answers3

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.

Denial Error
  • 24
  • 2
  • HI Denial, I cannot see any of those color attributes in the dataset object. I have attached an image to my question of what I can see with v4. – gtl21 Feb 17 '23 at 02:42
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

LeeLenalee
  • 27,463
  • 6
  • 45
  • 69
  • Thanks for your answer. When looking into it, I discovered the real reason for my issue. I posted a detailed answer describing it. – gtl21 Mar 02 '23 at 00:37
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.

gtl21
  • 1
  • 2