2

I have a vue application where I am using Chart.js. I am trying to dynamically populate the chart from data in a table with a row click event. I have the data displaying in the chart, but I am trying to figure out how I could get random colors into it. Any suggestions?

This is what the function looks like:

var ctx = document.getElementById("myDoughnut");
var myDoughnut = new Chart(ctx, {
    type: 'doughnut',
    data: {
        labels: this.getAnalyticRow[0].rowNames,
        datasets: [{
            data: this.getAnalyticRow[0].rowData,
            backgroundColor: [
                'rgba(255, 99, 132, 0.6)',
                'rgba(54, 162, 235, 0.6)',
                'rgba(255, 206, 86, 0.6)',
                'rgba(75, 192, 192, 0.6)',
                'rgba(153, 102, 255, 0.6)'
            ],
            borderColor: [
                'rgba(255,99,132,1)',
                'rgba(54, 162, 235, 1)',
                'rgba(255, 206, 86, 1)',
                'rgba(75, 192, 192, 1)',
                'rgba(153, 102, 255, 1)',
                'rgba(255, 159, 64, 1)'
            ],
            borderWidth: 2,
        }]
    },
    options: {
        responsive: true,
        defaultFontColor: '#ffffff',
    }

This is the chart:

chart

Tot Zam
  • 8,406
  • 10
  • 51
  • 76
DanielM96
  • 103
  • 1
  • 3
  • 12
  • Are you asking how to set the `backgroundColor` and `borderColor` to random colors instead of `rgba(255, 99, 132, 0.6)`? – Tot Zam Jul 30 '17 at 22:54
  • ya i am sending in dynamic data to the labels and data and i want to check the length of data array and put that many colors into the chart – DanielM96 Jul 31 '17 at 10:53
  • You could check my answer at [#48589545](https://stackoverflow.com/questions/28828915/how-set-color-family-to-pie-chart-in-chart-js/48589545#48589545) – Conny Olsson Feb 02 '18 at 23:11

1 Answers1

0

If you set background color in this way you set the background color of the first 5 elements because is array of color:

backgroundColor: [
            'rgba(255, 99, 132, 0.6)',
            'rgba(54, 162, 235, 0.6)',
            'rgba(255, 206, 86, 0.6)',
            'rgba(75, 192, 192, 0.6)',
            'rgba(153, 102, 255, 0.6)'
        ],

To resolve this you must insert just one background color but not in string array. Example:

backgroundColor: 'rgba(255, 99, 132, 0.6)'
Kygaex
  • 1