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="https://www.amcharts.com/lib/3/amcharts.js" type="text/javascript"></script>
<script src="https://www.amcharts.com/lib/3/plugins/export/export.min.js" type="text/javascript"></script>
<script src="https://www.amcharts.com/lib/3/serial.js" type="text/javascript"></script>
<script src="https://www.amcharts.com/lib/3/pie.js" type="text/javascript"></script>
<script src="https://www.amcharts.com/lib/3/funnel.js" type="text/javascript"></script>
<script src="https://www.amcharts.com/lib/3/xy.js" type="text/javascript"></script>
<script src="https://www.amcharts.com/lib/3/radar.js" type="text/javascript"></script>
<script src="https://www.amcharts.com/lib/3/gantt.js" type="text/javascript"></script>

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

CSS

.amcharts-graph-column, .amcharts-graph-bar,
.amcharts-graph-line, .amcharts-graph-step, .amcharts-graph-smoothedLine,
.amcharts-pie-item, .amcharts-funnel-item,
.amcharts-graph-candlestick
{ 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; }
.amcharts-graph-g1 { filter: url(#blur); }

JavaScript

$(function () {
    
    var options = {
        type: "serial",
        colors: ["#9999ff", "#993366", "#ffffcc", "#ccffff", "#660066", "#ff8080", "#0066cc", "#ccccff", "#000080", "#ff00ff", "#ffff00", "#00ffff", "#800080", "#800000", "#008080", "#0000ff"],
        addClassNames: true,
        startDuration: 0,
        labelsEnabled: false,
        plotAreaFillAlphas: 0,
        legend: {
            enabled: false,
        },
        categoryAxis: {
            labelsEnabled: false,
            axisThickness: 1, dashLength: 0, axisColor: "#707073",
            gridThickness: 1, gridColor: "#707073",
            minorGridThickness: 0, minorGridColor: "transparent",
            minorGridEnabled: false,
            tickLength: 3,
            minorTickLength: 0,
            titleColor: "#000000",
            titleFontSize: 8,
            color: "#000000",
            fontSize: 7,
        },
        valueAxes: [{ 
            id: "v1",
            position: "bottom",
            labelsEnabled: false,
            axisThickness: 1, dashLength: 0, axisColor: "#707073",
            gridThickness: 1, gridColor: "#707073",
            minorGridThickness: 0, minorGridColor: "transparent",
            minorGridEnabled: false,
            tickLength: 3,
            minorTickLength: 0,
            titleColor: "#000000",
            titleFontSize: 8,
            color: "#000000",
            fontSize: 7,
        }, {
            id: "v2",
            position: "left",
            labelsEnabled: false,
            axisThickness: 1, dashLength: 0, axisColor: "#707073",
            gridThickness: 1, gridColor: "#707073",
            minorGridThickness: 0, minorGridColor: "transparent",
            minorGridEnabled: false,
            tickLength: 3,
            minorTickLength: 0,
            titleColor: "#000000",
            titleFontSize: 8,
            color: "#000000",
            fontSize: 7,
        }],
        dataProvider: [ ],
        graphs: [ ],
        balloon: {
    ...