Basic Column Chart - CanvasJS JavaScript Charts

Basic Column Chart - CanvasJS JavaScript Charts

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 -->
<div id="chartContainer" style="height: 360px; width: 100%;"></div>

JavaScript

var chart = new CanvasJS.Chart("chartContainer", {
   theme: "light2",
      animationEnabled: true,
      zoomEnabled: true,
      zoomType: "xy",
      title: {
        text: "Beds Price Area BZH"
      },
      width: 520,

      axisX: {
        title: "Area"
      },
      axisY: {
        title: "Price"
      },
      legend: {
        cursor: "pointer",
        itemclick: this.toggleDataSeries
      },
      data: [
        {
          type: "scatter",
          name: "scatter",

          markerSize: 15,

           showInLegend: true,
          toolTipContent:
            '<span style="color:#C0504E ">{name}</span><br>Active Users: {x}<br>CPU Utilization: {y}%',
          dataPoints: [
            { x: 0, y: 215 },
            { x: 12.9, y: 175 },
            { x: 16.4, y: 325 },
            { x: 26.9, y: 635 },
            { x: 32.5, y: 464 },
            { x: 22.1, y: 522 },
            { x: 19.4, y: 412 },
            { x: 25.1, y: 614 },
            { x: 34.9, y: 374 },
            { x: 28.7, y: 625 },
            { x: 23.4, y: 544 },
            { x: 31.4, y: 502 },
            { x: 40.8, y: 262 },
            { x: 37.4, y: 312 },
            { x: 42.3, y: 202 },
            { x: 39.1, y: 302 },
            { x: 17.2, y: 0 }
          ]
        }
      ]
});

chart.render();