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>

Answer 1

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>