Pair data from two arrays ChartJS

Two arrays joined into one array of pairs to create bar chart with high and low. ChartJS

by akmiecik

HTML

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
 <div>
    <canvas id="canvas" height="100"></canvas>
  </div>

JavaScript

// Two arrays
let low = [1 ,3, 5, 7];
let high = [2, 4, 6, 8];

// Array that'll be use for ChartJS
let data_pairs = [];
// low.length defines how many times to iterate
// the number of data points in array low, 
//  array high must be same amount
for (var i = 0; i < low.length; i++) {
    data_pairs.push([low[i], high[i]]);
}
// stuff above creates array data_pairs

window.onload = function() {
      var ctx = document.getElementById('canvas').getContext('2d');
      window.myBar = new Chart(ctx, {
        type: 'bar',
        data: {
          labels: ["Label_1", "Label_2", "Label_3", "Label_4"],
          datasets: [{
            label: 'The Data Pairs',
            data: data_pairs,
            backgroundColor: 'red',
            borderRadius: 10,
// next line needed for bottom borde radius            
						borderSkipped: false,
          }]
 },
 
 
        options: {
          responsive: true,
          legend: {
            position: 'top',
          },
        }
      });
    };