Line shadow like this, possible? (Highcharts.js)

Question

I need to get this chart https://cloud.mail.ru/public/Kajv/qPJtoerE5 I have a problem with a line shadow. I tried to use linerGradient, but I did not get what I need... please, help me with it. Maybe someone knows another solution for creating such a chart.

P.S.: I also tried Chart.js

Hightchart's code below

 var myChart = Highcharts.chart('highchart', {
    chart: {
        type: 'spline',
        zoomType: 'x',
        backgroundColor: 'rgba(255,255,255,0)',
        selectionMarkerFill: 'rgba(0,0,0,0.12)',
        spacing: [30,32,6,32]
    },
    title: {
        text: ''
    },
    xAxis: {
        type: 'datetime',
        lineColor: '#31313f',
        tickColor: '#2c2c3a',
        labels: {
            format: '<text style="display: block; font: 600 8px/12px \'Graphik LCG\', sans-serif; text-transform: uppercase; color: rgba(255,255,255,0.6);">{value:%H:%M}</text>'
        }
    },
    yAxis: {
        title: {
            text: null
        },
        gridLineColor: '#31313f',
        min: 0,
        max: 100,
        labels: {
            format: '<span style="font: 500 8px/12px \'Graphik LCG\', sans-serif; color: rgba(255,255,255,0.6);">{value}₽</span>',
            align: 'left',
            x: 0,
            y: -2
        }
    },
    plotOptions: {
        series: {
            marker: {
                enabled: false
            }
        },
    },
    series: [{
        data: [25,30,40,30,45,50,55,45,38],
        pointStart: Date.UTC(2017, 10, 17, 10),
        pointInterval: 3600 * 1000, // one hour
        borderWidth: 2,
        color: '#4974f5',
        marker: {
            fillColor: '#4974f5',
            lineColor: '#2b2b38',
            lineWidth: 2
        }
    }],
    legend: {
        enabled: false
    },
    tooltip: {
        backgroundColor: '#32323f',
        borderRadius: 10,
        borderWidth: 0,
        padding: 0,
        shadow: false,
        useHTML: true,
        headerFormat: '<span style="display: block; margin-bottom: 2px; font: 600 8px/12px \'Graphik LCG\', sans-serif; text-align: center; text-transform: uppercase; color: rgba(255,255,255,0.6);">{point.key}</span>',
        pointFormat: '<span style="display: block; font: 500 12px/16px \'Graphik LCG\', sans-serif; text-align: center; color: #fff;">{point.y}₽</span>',
        footerFormat: '',
        valueDecimals: 2
    }
});

Answer 1

The solution here is to add a shadow to the line series and apply clipPath. Clip path needs to be based on the path of the graph.

Live demo: http://jsfiddle.net/kkulig/356gn4mv/

Shadow:

  defs: {
    shadow: {
      tagName: 'filter',
      id: 'shadow',
      clipPath: 'url(#clipS)',
      children: [{
        tagName: 'feDropShadow',
        dx: 0,
        dy: 0,
        stdDeviation: 10
      }]
    }
  },

Clip path:

  chart: {
    events: {
      load: function() {
        var chart = this,
          renderer = chart.renderer,
          clipPathD = chart.series[0].graphPath.slice();

        // modify the path so that it can be used as a clip (closed area)
        clipPathD.splice(1, 0, 0, chart.chartHeight, "L", 0, clipPathD[2], 'L');
        clipPathD.push("L", chart.chartWidth, clipPathD[clipPathD.length - 3], "L", chart.chartWidth, chart.chartHeight, "Z");

        var clipPath = renderer.createElement('clipPath').add(renderer.defs).attr({
          id: 'clipS'
        });

        renderer.path(clipPathD).add(clipPath);

      }
    }
  },

CSS:

.highcharts-graph {
  filter: url(#shadow);
  clip-path: url(#clipS);
}

---

Docs about SVG defs: https://www.highcharts.com/docs/chart-design-and-style/gradients-shadows-and-patterns

API reference: https://api.highcharts.com/class-reference/Highcharts.SVGRenderer