[Solved]-Chart.JS Mixed Chart - Bars Not Showing-Chart.js

var dates = ['a', 'b', 'c', 'd', 'e', 'f', 'h'];
var open = [1,2,3,4,2,5,1];
var high = [7,4,3,3,3,4,6];
var low = [7,2,2,4,7,6,3];
var close = [9,5,3,4,2,3,4];
var volume = [4,2,1,5,3,6,8];
var ctx = document.getelementbyid("qgl_chart").getcontext('2d');
      var mychart = new chart(ctx, {
      type: 'bar',
      data: data = {
        labels: [dates[0], dates[1], dates[2], dates[3], dates[4], dates[5], dates[6]],
        datasets: [
        {
          type: 'line',
          label: "open",
          fill: false,
          yaxisid: 'y-axis-a',
          linetension: 0.1,
          backgroundcolor: 'rgb(75, 214, 238)',
          bordercolor: 'rgb(75, 214, 238)',
          bordercapstyle: 'butt',
          borderdash: [],
          borderdashoffset: 0.0,
          borderjoinstyle: 'miter',
          pointbordercolor: 'rgb(75, 214, 238)',
          pointbackgroundcolor: 'rgb(75, 214, 238)',
          pointborderwidth: 1,
          pointhoverradius: 4,
          pointhoverbackgroundcolor: 'rgb(75, 214, 238)',
          pointhoverbordercolor: 'rgb(75, 214, 238)',
          pointhoverborderwidth: 3,
          pointradius: 5,
          pointhitradius: 10,
          data: [open[0], open[1], open[2], open[3], open[4], open[5], open[6]],
        },
        {
          type: 'line',
          label: "high",
          fill: false,
          yaxisid: 'y-axis-a',
          linetension: 0.1,
          backgroundcolor: 'rgb(210, 221, 72)',
          bordercolor: 'rgb(210, 221, 72)',
          bordercapstyle: 'butt',
          borderdash: [],
          borderdashoffset: 0.0,
          borderjoinstyle: 'miter',
          pointbordercolor: 'rgb(210, 221, 72)',
          pointbackgroundcolor: 'rgb(210, 221, 72)',
          pointborderwidth: 1,
          pointhoverradius: 4,
          pointhoverbackgroundcolor: 'rgb(210, 221, 72)',
          pointhoverbordercolor: 'rgb(210, 221, 72)',
          pointhoverborderwidth: 3,
          pointradius: 5,
          pointhitradius: 10,
          data: [high[0], high[1], high[2], high[3], high[4], high[5], high[6]],
        },
        {
          type: 'line',
          label: "low",
          fill: false,
          yaxisid: 'y-axis-a',
          linetension: 0.1,
          backgroundcolor: 'rgb(238, 79, 75)',
          bordercolor: 'rgb(238, 79, 75)',
          bordercapstyle: 'butt',
          borderdash: [],
          borderdashoffset: 0.0,
          borderjoinstyle: 'miter',
          pointbordercolor: 'rgb(238, 79, 75)',
          pointbackgroundcolor: 'rgb(238, 79, 75)',
          pointborderwidth: 1,
          pointhoverradius: 4,
          pointhoverbackgroundcolor: 'rgb(238, 79, 75)',
          pointhoverbordercolor: 'rgb(238, 79, 75)',
          pointhoverborderwidth: 3,
          pointradius: 5,
          pointhitradius: 10,
          data: [low[0], low[1], low[2], low[3], low[4], low[5], low[6]],
        },
        {
          type: 'line',
          label: "close",
          fill: false,
          yaxisid: 'y-axis-a',
          linetension: 0.1,
          backgroundcolor: 'rgb(28, 175, 154)',
          bordercolor: 'rgb(28, 175, 154)',
          bordercapstyle: 'butt',
          borderdash: [],
          borderdashoffset: 0.0,
          borderjoinstyle: 'miter',
          pointbordercolor: 'rgb(28, 175, 154)',
          pointbackgroundcolor: 'rgb(28, 175, 154)',
          pointborderwidth: 1,
          pointhoverradius: 4,
          pointhoverbackgroundcolor: 'rgb(28, 175, 154)',
          pointhoverbordercolor: 'rgb(28, 175, 154)',
          pointhoverborderwidth: 3,
          pointradius: 5,
          pointhitradius: 10,
          data: [close[0], close[1], close[2], close[3], close[4], close[5], close[6]],
        },
        {
          label: 'volume', //1d2939
          yaxisid: 'y-axis-b',
          data: [volume[0], volume[1], volume[2], volume[3], volume[4], volume[5], volume[6]],
          barpercentage: '1',
          categorypercentage: '1',
          backgroundcolor: 'rgb(29, 41, 57)',
          bordercolor: 'rgb(29, 41, 57)',
          borderwidth: '1',
          borderskipped: 'bottom',
          hoverbackgroundcolor: 'rgb(29, 41, 57)',
          hoverbordercolor: 'rgb(29, 41, 57)',
          hoverborderwidth: '3',
        },
      ]
    },
      options: {
        title: {
          display: true,
          text: 'share price - past 7 days',
          fontsize: '20',
          fontfamily: 'open sans, sans-serif',
          // fontcolor
          // fontstyle
          // padding
          // lineheight
        },
        scales: {
          xaxes: [{
            ticks: {
              min: 0
            }
          }],
          yaxes: [{
            position: "left",
            id: "y-axis-a",
          }, {
            position: "right",
            id: "y-axis-b",
          }]
        }
    }
  });

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/chart.js/2.7.2/chart.min.js"></script>
<canvas id="qgl_chart"></canvas>