Column Chart with CSS Gradient in Plot Area | CanvasJS Charts

Column Chart with CSS Gradient in Plot Area | CanvasJS Charts

by katsukino

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="container" style="position: relative;">
  <div id="gradient"></div>
  <div id="chartContainer" style="height: 360px; width: 100%; position: absolute;"></div>
</div>

CSS

#gradient {
  background: #fee140; /* For browsers that do not support gradients */
  background: -webkit-linear-gradient(top,#f5efef,#feada6); /*Safari 5.1-6*/
  background: -o-linear-gradient(top,#f5efef,#feada6); /*Opera 11.1-12*/
  background: -moz-linear-gradient(top,#f5efef,#feada6); /*Fx 3.6-15*/
  background: linear-gradient(to bottom, #f5efef, #feada6); /*Standard*/
}

JavaScript

var chart = new CanvasJS.Chart("chartContainer", {
  title:{
    text: "Chart with Gradient Plot Area"
  },
  backgroundColor: "transparent",
  data: [{
    type: "column",
    dataPoints: [
      { label: "apple",  y: 10  },
      { label: "orange", y: 15  },
      { label: "banana", y: 25  },
      { label: "mango",  y: 30  },
      { label: "grape",  y: 28  }
    ]
  }]
});

chart.render();

var gradientDiv = document.getElementById("gradient");
gradientDiv.style.cssText = "position: absolute; left:" + chart.axisX[0].bounds.x1 + "px; top:" + chart.axisY[0].bounds.y1 + "px; width:" + chart.axisX[0].bounds.width + "px; height:" + chart.axisY[0].bounds.height + "px";