Basic Column Chart - CanvasJS

Basic Column Chart

by mursang

HTML

<script src="https://cdn.canvasjs.com/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>
<br/>
<div id="chartContainer2" style="height: 360px; width: 100%;"></div>

JavaScript

var chart = new CanvasJS.Chart("chartContainer", {
  title:{
    text: "Basic line Chart"
  },
 	axisX: {
  minimum: 0,
  maximum: 25,
  crosshair:{
  enabled:true,
  updated: crosshairHandler
  }
  },
  data: [{			
    type:'line',
    dataPoints: [
      { x: 8000, y: 71 },
      { x: 250000, y: 55},
    ]
  }]
});

chart.render();

var chart2 = new CanvasJS.Chart("chartContainer2", {
  title:{
    text: "Basic rangebar Chart"
  },
  toolTip:{
  shared:false
  },
  axisY: {
  minimum: 0,
  maximum: 25,
  crosshair: {
  enabled:true,
  updated: crosshairHandler
  }
  },
  data: [{	
  	type: 'rangeBar',
    toolTipContent: '<b>{label}</b>: {y_formatted[0]},{y_formatted[1]}<br>{data}',
    dataPoints: [
      {
        label: 'test 0',
        y: [0, 50000],
        x: 0,
      },
      {
      label: 'test 1',
      	y: [60000, 250000],
        x: -1
      },
      {
      label: 'test 1',
      	y: [280000, 320000],
        x: -1
      }
    ]
  }]
});

chart2.render();

let charts = [chart, chart2];

function crosshairHandler(e){
   for (var j = 0; j < charts.length; j++) {
      if (charts[j] != e.chart) {
        if (e.chart.plotInfo.axisPlacement == 'xySwapped') {
          charts[j].axisX[0].crosshair.showAt(e.value);
        } else {
          if (charts[j].plotInfo.axisPlacement == 'xySwapped') {
            charts[j].axisY[0].crosshair.showAt(e.value);
          } else {
            charts[j].axisX[0].crosshair.showAt(e.value);
          }
        }
      }
    }
}

function alignYAxes() {
var axisYBound = 0,
      axisYChartIndex = 0;
    for (var i = 0; i < charts.length; i++) {
      if (charts[i].axisY.length == 0) {
        continue;
      }
      if (charts[i].plotInfo.axisPlacement == 'xySwapped') {
        if (charts[i].axisX[0].bounds.x2 > axisYBound) {
          axisYBound = charts[i].axisX[0].bounds.x2;
          axisYChartIndex = i;
        }
      } else {
        if (charts[i].axisY[0].bounds.x2 > axisYBound) {
          axisYBound =...