How to insert multiple values in Charts.js inside one title?

by

👍:0

You will need to make a dataset for each part so one for apples sold, one for oranges sold etc, in the data array you can put the numbers, if nothing is sold that day you can put a null value or 0 in there

Example:

var options = {
  type: 'bar',
  data: {
    labels: ["05/05", "06/05", "07/05", "08/05", "09/05", "10/05"],
    datasets: [{
        label: 'Apples sold',
        data: [12, 19, 3, 5, 2, 3],
        borderWidth: 1,
        backgroundColor: 'red'
      },
      {
        label: 'Bananas sold',
        data: [7, 11, 5, 8, 3, 7],
        borderWidth: 1,
        backgroundColor: 'yellow'
      },
      {
        label: 'Oranges sold',
        data: [10, null, null, 0, 6, 2],
        borderWidth: 1,
        backgroundColor: 'orange'
      }
    ]
  },
  options: {
    scales: {
      yAxes: [{
        ticks: {
          reverse: false
        }
      }]
    }
  }
}

var ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);
<body>
  <canvas id="chartJSContainer" width="600" height="400"></canvas>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.2.0/chart.js"></script>
</body>

Leave a comment