Basic Column Chart - CanvasJS

Basic Column Chart

HTML

<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<br/><!-- Just so that JSFiddle's Result label doesn't overlap the Chart -->
<script src="https://canvasjs.com/assets/script/jquery-1.11.1.min.js"></script>
<script src="https://canvasjs.com/assets/script/jquery.canvasjs.min.js"></script>
<div id="chartContainer" style="height: 370px; max-width: 920px; margin: 0px auto;"></div>

JavaScript

window.onload = function() {

  var options = {
    exportEnabled: true,
    animationEnabled: true,
    title: {
      text: "Suple"
    },
    subtitles: [{
      text: "show / hide"
    }],
    axisX: {
      title: "start date"
    },
    axisY: {
      title: "quant.",
      titleFontColor: "#4F81BC",
      lineColor: "#4F81BC",
      labelFontColor: "#4F81BC",
      tickColor: "#4F81BC",
      includeZero: false
    },
    toolTip: {
      shared: true,
      contentFormatter: function(e) {
        var content = " ";
        for (var i = 0; i < e.entries.length; i++) {
          content += e.entries[i].dataSeries.name + ": " + e.entries[i].dataPoint.y * e.entries[i].dataPoint.z + e.entries[i].dataPoint.zz;
          content += "<br/>";
        }
        return content;
      }
    },
    legend: {
      cursor: "pointer",
      itemclick: toggleDataSeries
    },
    data: [{
      type: "spline",
      name: "1.",
      xValueFormatString: "DD MM YYYY",
      dataPoints: [{
          z: 500,
          zz: " mg",
          x: new Date(2020, 5, 1),
          y: 2
        },
        {
          z: 500,
          zz: " mg",
          x: new Date(2020, 5, 3),
          y: 3
        },
        {
          z: 500,
          zz: " mg",
          x: new Date(2020, 5, 8),
          y: 3
        },
        {
          z: 500,
          zz: " mg",
          x: new Date(2020, 5, 9),
          y: 4
        },
        {
          z: 500,
          zz: " mg",
          x: new Date(2020, 5, 16),
          y: 6
        },
        {
          z: 500,
          zz: " mg",
          x: new Date(2020, 5, 23),
          y: 8
        },
      ]
    }, {
      type: "spline",
      name: "2.",
      xValueFormatString: "DD MM YYYY",
      dataPoints: [{
          z: 5000,
          zz: " IU",
          x: new Date(2020, 4, 10),
          y: 2
        },
        {
          z: 5000,
          zz: " IU",
          x: new Date(2020, 4, 12),
          y: 2
        },
        {
        ...