Basic Column Chart - CanvasJS JavaScript Charts

Basic Column Chart - CanvasJS JavaScript Charts

by flashback_ua

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",
{        

  axisX:{
                    title: "Tests & Metrics",
                    titleFontFamily: "verdana",
                    titleFontSize: 24,
                    titleFontColor: "DarkCyan",
                    labelFontSize: 18,
                    //interval: 1
                    },

                    axisY:{
                    title: "Metrics Values",
                    titleFontFamily: "verdana",
                    titleFontSize: 24,
                    titleFontColor: "DarkCyan",
                    labelFontSize: 18,
                    interval: auto
                    },

	data: [
	{
		type: "column",
		dataPoints: [
    	{ x: 1, y: 1 },
      { x: 2, y: 1.2 },
			{ x: 3, y: 7.476 },
			{ x: 4, y: 8.583 },
		]
	},
  
  	{
		type: "column",
		dataPoints: [
      { x: 1, y: 24.951 },
      { x: 2, y: 124.039 },
      { x: 3, y: 69587 },
      { x: 4, y: 6.918 },
		]
	}		
  
	]
});

chart.render();