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 notifications@github.com 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 https://github.com/nagix/chartjs-plugin-colorschemes/issues/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:

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.