Chartjs-Chartjs 1 to n relationship

by

0👍

If I correctly understand your question, you would have to define multiple datasets in order to obtain the desired result.

Please have a look at your amended code below that uses random data.

new Chart(document.getElementById("bar-chart"), {
  type: 'bar',
  data: {
    labels: ["Africa", "Asia", "Europe", "Latin America", "North America"],
    datasets: [{
        label: "Population (millions)",
        data: [2478, 5267, 734, 784, 433],
        backgroundColor: ["rgba(255, 99, 132, 0.6)", "rgba(255, 159, 64, 0.6)", "rgba(255, 205, 86, 0.6)", "rgba(75, 192, 192, 0.6)", "rgba(54, 162, 235, 0.6)"],
        borderColor: ["rgb(255, 99, 132)", "rgb(255, 159, 64)", "rgb(255, 205, 86)", "rgb(75, 192, 192)", "rgb(54, 162, 235)"],
        borderWidth: 1
      },
      {
        label: "Female (millions)",
        data: [1278, 2667, 370, 400, 216],
        backgroundColor: ["rgba(255, 99, 132, 0.4)", "rgba(255, 159, 64, 0.4)", "rgba(255, 205, 86, 0.4)", "rgba(75, 192, 192, 0.4)", "rgba(54, 162, 235, 0.4)"],
        borderColor: ["rgb(255, 99, 132)", "rgb(255, 159, 64)", "rgb(255, 205, 86)", "rgb(75, 192, 192)", "rgb(54, 162, 235)"],
        borderWidth: 1
      },
      {
        label: "Male (millions)",
        data: [1200, 2600, 364, 384, 217],
        backgroundColor: ["rgba(255, 99, 132, 0.2)", "rgba(255, 159, 64, 0.2)", "rgba(255, 205, 86, 0.2)", "rgba(75, 192, 192, 0.2)", "rgba(54, 162, 235, 0.2)"],
        borderColor: ["rgb(255, 99, 132)", "rgb(255, 159, 64)", "rgb(255, 205, 86)", "rgb(75, 192, 192)", "rgb(54, 162, 235)"],
        borderWidth: 1
      }
    ]
  },
  options: {
    legend: {
      display: false
    },
    title: {
      display: true,
      text: 'Predicted world population (millions) in 2050'
    },
    tooltips: {
      mode: 'index'
    }
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.js"></script>
<canvas id="bar-chart" width="800" height="450"></canvas>

Leave a comment