Basic Column Chart - CanvasJS JavaScript Charts

Basic Column Chart - CanvasJS JavaScript Charts

by jeremylee469

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: 480px;"></div>

JavaScript

var chart = new CanvasJS.Chart("chartContainer", {
	animationEnabled: true,
	theme: "light2", // "light1", "light2", "dark1", "dark2"
	title:{
		text: "Lifetime risk (%)"
	},
	axisX:{
		labelFontFamily: "tahoma",
		labelFontSize: 18,
		labelMaxWidth: 120,		
		labelFontWeight: "bold"
	},
	axisY: {
/*		title: "probability (%)",*/
		suffix: "%",
    type: "wavy",
		scaleBreaks: {
			type: "wavy",
			customBreaks: [{
				startValue: 6,
				endValue: 37
				}]
		}
	},
  
	data: [{        
		type: "column",  
		markerSize: 10,
		indexLabel: "{y}",
		indexLabelPlacement: "inside",
/*		indexLabelFontColor: "#EEEEEE",*/
		indexLabelFontColor: "#000000",
        indexLabelFontSize: 30,
		yValueFormatString: "#,##0.##\"%\"",
		showInLegend: true, 
		legendMarkerColor: "grey",
		legendText: " ",
      dataPoints: [
			{ y:3.25, label: "Your risk of getting XYZ"},
			{ y: 0.62, label: "Average risk of getting ABC DEF", fontSize: 20},
 			{ y: 38.50, label: "Average risk of getting GHI JKL", fontSize: 20}
      ]
    }					
  ]
});

chart.render();