Highcharts Spline color fade

Highcharts spline chart with color and fade changes. Uses linearGradient and stops.

by Bryan McIntosh

HTML

<script
  src="https://code.jquery.com/jquery-3.2.1.min.js"
  integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
  crossorigin="anonymous"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="container" style="height: 400px"></div>

JavaScript

$(function () {
    var color = '#AA34FF';

    $('#container').highcharts({
        series: [{
            color: {
                linearGradient: {
                    x1: 0, y1: 0, x2: 1, y2: 0
                },
                stops: [
                    [0, 'red'],
                    [0.5, 'rgba(26, 26, 228,1)'],
                    [1, 'rgba(26, 26, 228,0)']
                ]
            },
            lineWidth: 10,
            marker: {
                enabled: false,
                states: {
                    hover: {
                        radius: 10,
                        fillColor: 'black'
                    }
                }
            },
            type: 'spline',
            data: [1, 2, 5, 3, 6, 7, 4, 2, 1]
        }]

    });

});