Adding an additional datasets to chartJS

Question

I got this chart to create

I've successfully created the 2019 part with 5 points of colorful data inside. What I have so far:

I'm trying to add 2020 and 2021 data. Here's my code:

const DATA_COUNT = 3;
const NUMBER_CFG = {count: DATA_COUNT, min: 0, max: 70};

const labels = ['2019', '2020', '2021'];
const data = {
  labels: labels,
  datasets: [
    {
      label: 'AUD',
      data: ['51.01'],
      borderColor: '#3088E4',
      backgroundColor: '#3088E4',
    },
    {
      label: 'BEC',
      data: ['59.98'],
      borderColor: '#734C9D',
      backgroundColor: '#734C9D',
    },
    {
      label: 'FAR',
      data: ['46.31'],
      borderColor: '#4FA333',
      backgroundColor: '#4FA333',
    },
    {
      label: 'FAR',
      data: ['56.34'],
      borderColor: '#EC990F',
      backgroundColor: '#EC990F',
    },
    {
      label: 'Cumulative',
      data: ['53.41'],
      borderColor: '#999999',
      backgroundColor: '#999999',
    }
  ]
};

It can be tested live here, by pasting it under "Setup": https://www.chartjs.org/docs/latest/samples/bar/vertical.html

Answer 1

You can pass multiple values inside the data.datasets[x].data attributes

const DATA_COUNT = 3;
const NUMBER_CFG = {count: DATA_COUNT, min: 0, max: 70};

const labels = ['2019', '2020', '2021'];
const data = {
  labels: labels,
  datasets: [
    {
      label: 'AUD',
      data: [51.01, 50.02, 45],
      borderColor: '#3088E4',
      backgroundColor: '#3088E4',
    },
    {
      label: 'BEC',
      data: [59.98, 40.05, 56],
      borderColor: '#734C9D',
      backgroundColor: '#734C9D',
    },
    {
      label: 'FAR',
      data: [46.31, 34.57, 78],
      borderColor: '#4FA333',
      backgroundColor: '#4FA333',
    },
    {
      label: 'FAR',
      data: [56.34, 78, 35],
      borderColor: '#EC990F',
      backgroundColor: '#EC990F',
    },
    {
      label: 'Cumulative',
      data: [53.41, 24, 23],
      borderColor: '#999999',
      backgroundColor: '#999999',
    }
  ]
};

const ctx = document.getElementById('myChart').getContext('2d');
const myChart = new Chart(ctx, {
    type: 'bar',
    data,
});

<script src="https://cdn.jsdelivr.net/npm/chart.js@3.8.0/dist/chart.min.js"></script>

<canvas id="myChart" width="400" height="400"></canvas>

Answer 2

Got it figured out. It was a matter of just adding data points right inside under 'data':

const DATA_COUNT = 3;
const NUMBER_CFG = {count: DATA_COUNT, min: 0, max: 70};

const labels = ['2019', '2020', '2021'];
const data = {
  labels: labels,
  datasets: [
    {
      label: 'AUD',
      data: ['51.01', '50.49', '47.98'],
      borderColor: '#3088E4',
      backgroundColor: '#3088E4',
    },
    {
      label: 'BEC',
      data: ['59.98', '62.56', '61.94'],
      borderColor: '#734C9D',
      backgroundColor: '#734C9D',
    },
    {
      label: 'FAR',
      data: ['46.31', '49.98', '44.54'],
      borderColor: '#4FA333',
      backgroundColor: '#4FA333',
    },
    {
      label: 'REG',
      data: ['56.34', '62.29', '59.88'],
      borderColor: '#EC990F',
      backgroundColor: '#EC990F',
    },
    {
      label: 'Cumulative',
      data: ['53.41', '57.67', '53.59'],
      borderColor: '#999999',
      backgroundColor: '#999999',
    }
  ]
};