One Dataset with multiple columns/rows are all same colour

I have spotted an issue and not sure if there is a way around it.

If one dataset has multiple rows, lines, columns then the bars/lines are all coloured the same colour:

e.g.

let title = data.chartData[0].chartTitle;
let labels = data.chartData.map(a => a.title);
let values = data.chartData.map(a => a.value);
...
datasets: [{
   label: title,
   borderWidth: 1,
   data: values
},

Is there a way around this or do I need to design my charts differently or find another solution to colour the bars? I can colour them by specifying an array of background colours.

Thanks Robin

[kieldoyle]

Based on a workaround from this reply to another issue:

https://github.com/nagix/chartjs-plugin-colorschemes/issues/7#issuecomment-476723949

It is possible to access the underlying arrays of colours in the plugin. So you can directly apply the colours to a single dataset. For example this simple bar graph has a single dataset with each bar being coloured using the ‘Tableau10’ palette.

var myChart = new Chart(document.getElementById('myChart'), {
  type: 'bar',
  data: {
    labels: ['One', 'Two', 'Three', 'Four', 'Five', 'Six', 'Seven'],
    datasets: [{
      label: '# of things',
      data: [12, 19, 3, 5, 2, 3, 4],
      backgroundColor: Chart['colorschemes'].tableau.Tableau10,
    }]
  },
  options: {
    scales: {
      yAxes: [{
        ticks: {
          beginAtZero: true
        }
      }]
    }
  }
});

As the palettes are simple arrays of hex strings they can be manipulated and extended to suit your data.

[muniquew]

I had the same problem, but I got it working after adding

case"bar":

on the switch case, it’s now like this:

switch (o = d % l, n = t[i ? l - o - 1 : o], f[b] = {}, f.type || e.config.type) {
	case "line":
	case "radar":
	case "scatter":
		(void 0 === f.backgroundColor || s) && (f[b].backgroundColor = f.backgroundColor, f.backgroundColor = c.color(n).alpha(u).rgbString()), (void 0 === f.borderColor || s) && (f[b].borderColor = f.borderColor, f.borderColor = n), (void 0 === f.pointBackgroundColor || s) && (f[b].pointBackgroundColor = f.pointBackgroundColor, f.pointBackgroundColor = c.color(n).alpha(u).rgbString()), (void 0 === f.pointBorderColor || s) && (f[b].pointBorderColor = f.pointBorderColor, f.pointBorderColor = n);
		break;
	case "doughnut":
	case "pie":
	case "polarArea":
	case "bar":
		(void 0 === f.backgroundColor || s) && (f[b].backgroundColor = f.backgroundColor, f.backgroundColor = f.data.map(function(f, e) {
			return o = e % l, t[i ? l - o - 1 : o]
		}));
		break;
	default:
		(void 0 === f.backgroundColor || s) && (f[b].backgroundColor = f.backgroundColor, f.backgroundColor = n)
}