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: 300px; width: 100%;"></div>

JavaScript

var axisX = {};
var limit = 1000;    //increase number of dataPoints by increasing this
var data=[{"type":"line","showInLegend":true,"legendText":"a a","name":"a a","toolTipContent":"<span style='\"'color: {color};'\"'>{name}</span>: {y}","dataPoints":[{"x":0,"y":5,"meaQuantityId":null,"meaResultId":null,"nodeName":"d_1","nodeType":null,"y1":null,"x1":null,"interval":null,"yUnitName":null,"xUnitName":"u1","isHugeData":null,"value":null,"count":1}],"color":"#1BCDD1"},{"type":"line","showInLegend":true,"legendText":"b b","name":"b b","toolTipContent":"<span style='\"'color: {color};'\"'>{name}</span>: {y}","dataPoints":[{"x":0,"y":6,"meaQuantityId":null,"meaResultId":null,"nodeName":"d_2","nodeType":null,"y1":null,"x1":null,"interval":null,"yUnitName":null,"xUnitName":"u1","isHugeData":null,"value":null,"count":1}],"color":"#EC5657"},{"type":"line","showInLegend":true,"legendText":"c c","name":"abcdjsadhjkhsdfjkhdjksfhdhf4dsfdg gfhgjhgjjhkjh","toolTipContent":"<span style='\"'color: {color};'\"'>{name}</span>: {y}","dataPoints":[{"x":0,"y":2,"meaQuantityId":null,"meaResultId":null,"nodeName":"df","nodeType":null,"y1":null,"x1":null,"interval":null,"yUnitName":null,"xUnitName":"u1","isHugeData":null,"value":null,"count":1}],"color":"#4661EE"},{"type":"line","showInLegend":true,"legendText":"d d","name":"d d","toolTipContent":"<span style='\"'color: {color};'\"'>{name}</span>: {y}","dataPoints":[{"x":0,"y":3,"meaQuantityId":null,"meaResultId":null,"nodeName":"df_1","nodeType":null,"y1":null,"x1":null,"interval":null,"yUnitName":null,"xUnitName":"u1","isHugeData":null,"value":null,"count":1}],"color":"#8FAABB"}]
var chart = new CanvasJS.Chart("chartContainer",
    {
      zoomEnabled: true,
      legend: {
  
   itemclick: function(e){
          alert( "Legend item clicked with type : ");
        }
 
 },
      rangeChanged: function(e){
        if (!e.chart.options.viewportMinStack){
							e.chart.options.viewportMinStack = [];
						 ...