canvasjs-charts-shadow-effect v1.1.1

CanvasJS Charts Shadow Effect

This is a plugin for CanvasJS Charts that allows you to add shadow-effect. Checkout Documentation

Usage

Import Script

Import CanvasJS & CanvasJS Shadow scripts

/* HTML Script Tag */
<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/canvasjs-charts-shadow-effect/dist/canvasjscharts-shadow.min.js"></script>

/* or */
import CanvasJS from './canvasjs.min';
window.CanvasJS = CanvasJS;
require('canvasjs-charts-shadow-effect');

/* React */
import CanvasJSReact from './canvasjs.react';
window.CanvasJS = CanvasJSReact.CanvasJS;
require('canvasjs-charts-shadow-effect');

Apply Shadow properties & render the chart.

var chart = new CanvasJS.Chart("chartContainer", {
	.
	.
	.
	//Chart Options
	shadowEnabled: true,
	shadowStyle: {
		color: "black",
		offsetX: 4,
		blurLevel: 4
	}
	.
	.
	.
});
chart.render();

You can add shadow-effect to following chart types in CanvasJS Charts.

• Line Chart
• Step Line Chart
• Spline Chart
• Column Chart
• Bar Chart
• Stacked Column Chart
• Stacked Bar Chart
• Stacked Column 100 Chart
• Stacked Bar 100 Chart
• Bubble Chart
• Scatter Chart
• Candlestick Chart
• OHLC Chart
• Range Column Chart
• Range Bar Chart
• Error Chart
• Waterfall Chart
• Box & Whisker Chart

Note:

• Plugin was last tested with CanvasJS Chart v3.6.7
• This plugin requires you to have CanvasJS License. Please visit CanvasJS for more info.