Series Shadows

by cristiscu

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js" type="text/javascript"></script>
<script src="http://cdn.syncfusion.com/15.1.0.37/js/common/ej.core.js" type="text/javascript"></script>
<script src="http://cdn.syncfusion.com/15.1.0.37/js/common/ej.data.js" type="text/javascript"></script>
<script src="http://cdn.syncfusion.com/15.1.0.37/js/common/ej.globalize.js" type="text/javascript"></script>
<script src="http://cdn.syncfusion.com/15.1.0.37/js/datavisualization/ej.chart.js" type="text/javascript"></script>

<div class="chart_cont">
    <div id="chart_div"></div>
</div>

CSS

/*#chart_div_svg_Series0 { filter: url(#svg_effect); }*/

body {
    padding: 0;
    margin: 0;
    border: none;
}
#chart_div, #ContentChartPh_chart_img, .chart_cont {
    width: 300px;
    height: 185px;
    padding: 0;
    margin: 0;
    border: none;
    position: relative;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}
#chart_div {
    background-repeat: no-repeat;
    background-position: center center;
    background-color: #fff;
    background-image: url('http://res.cloudinary.com/chart-templates/image/upload/img/chart-loading.gif');
}
#chart_div svg { height: 185px; }
img { z-index: -1; }

JavaScript

$(function () {
    
    var options = {
        size: { width: "300", height: "185" },
        load: "onLoad", loaded: "afterLoaded", chartMouseMove: "afterLoaded",
        palette: ["#9999ff", "#993366", "#ffffcc", "#ccffff", "#660066", "#ff8080", "#0066cc", "#ccccff", "#000080", "#ff00ff", "#ffff00", "#00ffff", "#800080", "#800000", "#008080", "#0000ff"],
        enable3D: false,
        isResponsive: true,
        enableRotation: false,
        margin: { left: 0, right: 0, top: 0, bottom: 0 },
        legend: {
            visible: false,
        },
        chartArea: {
            background: "transparent",
            border: {
                opacity: 1,
            },
        },
        primaryXAxis: {
            visible: true,
            stripLine: [{ visible: false }],
            title: {
                font: { fontFamily: "", size: "8px", color: "#000000", },
            },
            font: { color: "transparent" },
            axisLine: { visible: true, width: 1, dashArray: "0", color: "#707073", },
            majorGridLines: { visible: true, width: 1, dashArray: "0", color: "#707073", },
            minorGridLines: { visible: false },
            minorTicksPerInterval: 0,
            majorTickLines: { visible: true, width: 2, size: 3, color: "#707073", },
            minorTickLines: { visible: false },
        },
        primaryYAxis: {
            visible: true,
            stripLine: [{ visible: false }],
            title: {
                font: { fontFamily: "", size: "8px", color: "#000000", }, 
            },
            font: { color: "transparent" },
            axisLine: { visible: true, width: 1, dashArray: "0", color: "#707073", },
            majorGridLines: { visible: true, width: 1, dashArray: "0", color: "#707073", },
            minorGridLines: { visible: false },
            minorTicksPerInterval: 0,
            majorTickLines: { visible: true, width: 2, size: 3, color: "#707073", },
            minorTickLines: { visible:...