different colors for bar chart with chart.js

Question

Good day, I have a problem with the color scheme of my bar chart. For each time there are 4 values. These values should have 4 different colors. You will find the code and a current picture in the attachment.

I tried several options for the coloring. Nothing works.

For example, if I change the following, the bars will all just be grayed out

backgroundColor: [ "red", "green", "blue", "black", "yellow", ],

Thank you!!!!

 public function auswertungBarDiagrammUhrzeiten($daten, $auswertungsKategorien)
    {
        $html = "";

        foreach($daten as $daten_tag_key =>$daten_tag) {

            $labelString = "";
            $datasetString = "";

            $auswertungsKategorien = array_unique($auswertungsKategorien); 
            sort($auswertungsKategorien);  
            
            for ($x = 0; $x < 24; $x++) {
                $labelString .= '"' . $x . '",';
            }

            foreach ($daten_tag as $daten_tag_kategorie_key => $daten_tag_kategorie) {
                $dataString = "";
                for ($x = 0; $x < 24; $x++) {
                    $dataString .= '"' . $daten_tag_kategorie[$x . '_A'] . '",';
                }

                $datasetString .=
                    '{
                      label: "'.$daten_tag_kategorie_key.'",
                       backgroundColor: "red",
                      data: [' . $dataString . '],
                 },';
            }

            $html .= '<canvas id="myBarChartUhrzeiten' . $daten_tag_key . '"></canvas>'     

                . '<script>
                    
                    var ctx = document.getElementById("myBarChartUhrzeiten' . $daten_tag_key                . '").getContext("2d");
                    
                    console.log(ctx);
                    var chart = new Chart(ctx, {
                        // The type of chart we want to create
                        type: "bar",
    
                        // The data for our dataset
                        data:
                        {
                            labels:   [' . $labelString . '],
                            datasets: [' . $datasetString . ']
                        },
                        
                        options:
                        {
                             legend: 
                             {
                                display: false,
                             },
                             
                             plugins: 
                             {
                                datalabels: 
                                {
                                    display: false,
                                },
                             }
                        }
                    });
    
                </script>';

        }
        return $html;
    }

enter image description here

LeeLenalee LeeLenalee · Accepted Answer · 2021-03-21T15:16:19

You have to make sure you use the most up to date version of the lib. If you have this, you can use scriptable options to get the right color for the background like this:

const backgroundColor = ['red', 'blue', 'yellow']
var options = {
  type: 'bar',
  data: {
    labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
    datasets: [{
      label: '# of Votes',
      data: [12, 19, 3, 5, 2, 3],
      backgroundColor: (c) => (backgroundColor[c.dataIndex % backgroundColor.length]),
      borderWidth: 1
    }]
  },
  options: {
    scales: {
      yAxes: [{
        ticks: {
          reverse: false
        }
      }]
    }
  }
}

var ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);

<body>
  <canvas id="chartJSContainer" width="600" height="400"></canvas>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.js" integrity="sha512-hZf9Qhp3rlDJBvAKvmiG+goaaKRZA6LKUO35oK6EsM0/kjPK32Yw7URqrq3Q+Nvbbt8Usss+IekL7CRn83dYmw==" crossorigin="anonymous"></script>
</body>

different colors for bar chart with chart.js

1 Answers