CSS Gradient as Chart Background - CanvasJS JavaScript Charts

CSS Gradient as Chart Background - 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>

CSS

#chartContainer {
  background: #f4a37a; /* For browsers that do not support gradients */
  background: -webkit-linear-gradient(left,#f4a37a,#fe454d); /*Safari 5.1-6*/
  background: -o-linear-gradient(left,#f4a37a,#fe454d); /*Opera 11.1-12*/
  background: -moz-linear-gradient(left,#f4a37a,#fe454d); /*Fx 3.6-15*/
  background: linear-gradient(to right, #f4a37a, #fe454d); /*Standard*/
}

JavaScript

var chart = new CanvasJS.Chart("chartContainer", {
	backgroundColor: "transparent",
  theme: "theme2",
	title: {
  	text: "Gradient as Chart Background"
  },
  axisX: {
  	lineColor: "white",
    tickColor: "white",
  	labelFontColor: "white"
  },
  axisY: {
    tickColor: "white",
    gridColor: "white",    
  	labelFontColor: "white"
  },
	data: [
	{
		type: "column",
		dataPoints: [
			{ x: 10, y: 71 },
			{ x: 20, y: 55 },
			{ x: 30, y: 50 },
			{ x: 40, y: 65 },
			{ x: 50, y: 95 },
			{ x: 60, y: 68 },
			{ x: 70, y: 28 },
			{ x: 80, y: 34 },
			{ x: 90, y: 14 }
		]
	}					
	]
});

chart.render();