One Dataset with multiple columns/rows are all same colour

[robinwilson16]

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

[mayassalman]

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

[robinwilson16]

Sorry I am confused by your screenshot. Are you saying it is possible with one dataset or confirming that it isn't?

[mayassalman]

I am sorry to make you confused actually i confirming that i have the same problem *Best Regards*

…

On Mon, Jul 8, 2019 at 12:14 AM Robin Wilson ***@***.***> wrote: Sorry I am confused by your screenshot. Are you saying it is possible with one dataset or confirming that it isn't? — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#11?email_source=notifications&email_token=ACQ2YPUVZXOCC6NOOMC3K7LP6JMEDA5CNFSM4H2RXEIKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGODZLTHCQ#issuecomment-509031306>, or mute the thread <https://github.com/notifications/unsubscribe-auth/ACQ2YPSWD5E6MKQC5PNTI3DP6JMEDANCNFSM4H2RXEIA> .

[robinwilson16]

Oh right sorry.

I did find a way around it actually which was to use a palette.js script I found instead:
https://github.com/google/palette.js/tree/master

Now I load in my data using Ajax and count the number of bars/records in order to use the .js file to generate colours for all bars.
It works well and has generated colours for all the bars no matter how many there are.
The only issue is some colour schemes do not have sufficient colours so you get an error.

This code works:

let colours = palette('qualitative', data.chartData.length, 0);

chart.data.datasets[0].backgroundColor = colours.map(function (hex) {
  return '#' + hex;
});

Hope it helps.
Robin

[mayassalman]

I think it will not be bad idea to store some pallets hardcoded in json objects and use it...

[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)
}

[kieldoyle]

Based on a workaround from this reply to another issue:

#7 (comment)

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.