Column Chart with Opacity - CanvasJS JavaScript Charts

Column Chart with Opacity - CanvasJS JavaScript Charts

by canvasjs

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",
	{
		title:{
			text: "Charts With Fill Opacity to Make Gridlines Visible"
		},
		data: [		
		{        
			type: "column",
			fillOpacity: .75, //**Try various Opacity values **//
			dataPoints: [
				{ x: 10, y: 71 },
				{ x: 20, y: 15 },
				{ x: 30, y: 15 },
				{ x: 40, y: 75 },
				{ x: 50, y: 45 },
				{ x: 60, y: 98 },
				{ x: 70, y: 18 },
				{ x: 80, y: 64 },
				{ x: 90, y: 84 }
			]
		}
		]
	});
chart.render();