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

Antoine Guerra · Accepted Answer · 2022-06-06 21:45:02Z

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/[email protected]/dist/chart.min.js"></script>

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

Davron · Accepted Answer · 2022-06-06 21:37:56Z

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',
    }
  ]
};

Collectives™ on Stack Overflow

Adding an additional datasets to chartJS

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related