How to share same background color for multiple dataset in a chart?

Question

I am trying to use Chart.js to create a bar chart. I want my chart to look like this example where each dataset has the same color on the chart.

However, in my case, the color are showing up wrong. I want each category to share the same color across the chart.

Also, is there a way to place the label (ie, Category 1, Category 2...) under each bar over the date?

Here is what I have done

document.addEventListener('DOMContentLoaded', function () {

  const options = {
     "type":"bar",
     "data":{
        "labels":[
           "10/25/2021",
           "11/1/2021",
           "11/8/2021",
           "11/15/2021"
        ],
        "datasets":[
           {
              "label":"Category 1",
              "data":[
                 {
                    "x":"11/1/2021",
                    "y":3.25
                 },
                 {
                    "x":"11/8/2021",
                    "y":3.66
                 },
                 {
                    "x":"11/15/2021",
                    "y":4.00
                 }
              ],
              "borderWidth":0,
              "backgroundColor":[
                 "red",
                 "blue",
                 "black",
                 "silver"
              ]
           },
           {
              "label":"Category 2",
              "data":[
                 {
                    "x":"11/1/2021",
                    "y":3.00
                 },
                 {
                    "x":"11/8/2021",
                    "y":4.00
                 },
                 {
                    "x":"11/15/2021",
                    "y":5.00
                 }
              ],
              "borderWidth":0,
              "backgroundColor":[
                 "red",
                 "blue",
                 "black",
                 "silver"
              ]
           },
           {
              "label":"Category 3",
              "data":[
                 {
                    "x":"11/1/2021",
                    "y":2.00
                 },
                 {
                    "x":"11/8/2021",
                    "y":4.33
                 },
                 {
                    "x":"11/15/2021",
                    "y":5.00
                 }
              ],
              "borderWidth":0,
              "backgroundColor":[
                 "red",
                 "blue",
                 "black",
                 "silver"
              ]
           },
           {
              "label":"Category 4",
              "data":[
                 {
                    "x":"11/1/2021",
                    "y":3.25
                 },
                 {
                    "x":"11/8/2021",
                    "y":4.33
                 },
                 {
                    "x":"11/15/2021",
                    "y":4.00
                 }
              ],
              "borderWidth":0,
              "backgroundColor":[
                 "red",
                 "blue",
                 "black",
                 "silver"
              ]
           },
           {
              "label":"Category 5",
              "data":[
                 {
                    "x":"11/1/2021",
                    "y":3.25
                 },
                 {
                    "x":"11/8/2021",
                    "y":4.00
                 },
                 {
                    "x":"11/15/2021",
                    "y":5.00
                 }
              ],
              "borderWidth":0,
              "backgroundColor":[
                 "red",
                 "blue",
                 "black",
                 "silver"
              ]
           },
           {
              "label":"Category 6",
              "data":[
                 {
                    "x":"11/1/2021",
                    "y":3.00
                 },
                 {
                    "x":"11/8/2021",
                    "y":4.66
                 },
                 {
                    "x":"11/15/2021",
                    "y":4.00
                 }
              ],
              "borderWidth":0,
              "backgroundColor":[
                 "red",
                 "blue",
                 "black",
                 "silver"
              ]
           }
        ]
     },
     "options":{
        "responsive":false,
        "plugins":{
           "legend":{
              "position":"top"
           },
           "title":{
              "display":true,
              "text":"Category Overview"
           }
        }
     }
  };

  let canvas = document.getElementById('chart');
  new Chart(canvas.getContext('2d'), options);
});

<script src="https://cdn.jsdelivr.net/npm/chart.js@3.6.0/dist/chart.min.js"></script>
<canvas width="400" height="400" id="chart"></canvas>

score 1 · Accepted Answer · answered Nov 15 '21 at 17:50

This is because you provide the background color as an array which makes it so chart.js interpates it as you want those colors to rotate for that dataset. If you want the dataset to be a single color like the example you linked, you just need to pass a string with a single color or an array with a single entry.

document.addEventListener('DOMContentLoaded', function() {

  const options = {
    "type": "bar",
    "data": {
      "labels": [
        "10/25/2021",
        "11/1/2021",
        "11/8/2021",
        "11/15/2021"
      ],
      "datasets": [{
          "label": "Category 1",
          "data": [{
              "x": "11/1/2021",
              "y": 3.25
            },
            {
              "x": "11/8/2021",
              "y": 3.66
            },
            {
              "x": "11/15/2021",
              "y": 4.00
            }
          ],
          "borderWidth": 0,
          "backgroundColor": "red"
        },
        {
          "label": "Category 2",
          "data": [{
              "x": "11/1/2021",
              "y": 3.00
            },
            {
              "x": "11/8/2021",
              "y": 4.00
            },
            {
              "x": "11/15/2021",
              "y": 5.00
            }
          ],
          "borderWidth": 0,
          "backgroundColor": "blue"
        },
        {
          "label": "Category 3",
          "data": [{
              "x": "11/1/2021",
              "y": 2.00
            },
            {
              "x": "11/8/2021",
              "y": 4.33
            },
            {
              "x": "11/15/2021",
              "y": 5.00
            }
          ],
          "borderWidth": 0,
          "backgroundColor": "black"
        },
        {
          "label": "Category 4",
          "data": [{
              "x": "11/1/2021",
              "y": 3.25
            },
            {
              "x": "11/8/2021",
              "y": 4.33
            },
            {
              "x": "11/15/2021",
              "y": 4.00
            }
          ],
          "borderWidth": 0,
          "backgroundColor": "silver"
        },
        {
          "label": "Category 5",
          "data": [{
              "x": "11/1/2021",
              "y": 3.25
            },
            {
              "x": "11/8/2021",
              "y": 4.00
            },
            {
              "x": "11/15/2021",
              "y": 5.00
            }
          ],
          "borderWidth": 0,
          "backgroundColor": "pink"
        },
        {
          "label": "Category 6",
          "data": [{
              "x": "11/1/2021",
              "y": 3.00
            },
            {
              "x": "11/8/2021",
              "y": 4.66
            },
            {
              "x": "11/15/2021",
              "y": 4.00
            }
          ],
          "borderWidth": 0,
          "backgroundColor": "orange"
        }
      ]
    },
    "options": {
      "responsive": false,
      "plugins": {
        "legend": {
          "position": "top"
        },
        "title": {
          "display": true,
          "text": "Category Overview"
        }
      }
    }
  };

  let canvas = document.getElementById('chart');
  new Chart(canvas.getContext('2d'), options);
});

<script src="https://cdn.jsdelivr.net/npm/chart.js@3.6.0/dist/chart.min.js"></script>
<canvas width="400" height="400" id="chart"></canvas>

Thank you! What about placing the label under each bar? is that possible? — Jay, Nov 15 '21 at 18:18
You can use the [dataLabels plugin](https://chartjs-plugin-datalabels.netlify.app/) and use the formatter function to change it, but not sure if you can get it nice under the labels, best way to achieve it is to write a custom plugin — LeeLenalee, Nov 15 '21 at 19:03

How to share same background color for multiple dataset in a chart?

1 Answers1