Chartjs-Chart js using for loop

by

2👍

✅

You can use Array.map() to directly transform your data into the definition required by Chart.js.

Please take a look at your amended and runnable code and see how it works.

var names2 = ['name1', 'name2'];
var colors2 = ['orange', 'blue'];
var data2 = [[10, 20], [20, 30]];
var dates2 = ['2020-01', '2020-02'];

new Chart('food_items_line_chart', {
  type: 'line',  
  data: {
    labels: dates2,  
    datasets: dates2.map((ds, i) => ({
      label: names2[i],
      data: data2[i],
      borderColor: colors2[i],
      borderWidth: 1
    }))  
  },
  options:  {
    scales: {
      y: {
        min: 0        
      }
    }
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.1/chart.min.js"></script>
<canvas id="food_items_line_chart" height="80"></canvas>

Leave a comment