score:2

Accepted answer

It seems that for line charts where you have zero values or adjacent data points with the same value the only way to achieve a gradient is by applying the gradient to the markers themselves rather than the actual line.

It seems that this was/is a known Highcharts issue as can be seen here, but the markers work around which I pulled from here can be viewed in the below snippet:

$(function () {
    var colors = ['#4572A7',
        '#AA4643',
        '#89A54E',
        '#80699B',
        '#3D96AE',
        '#DB843D',
        '#92A8CD',
        '#A47D7C',
        '#B5CA92'];
    var applyGradient = function (color) {
        return {
            radialGradient: {
                cx: 0.5,
                cy: 0.3,
                r: 0.7
            },
            stops: [
                [0, color],
                [1, Highcharts.Color(color).brighten(-0.3).get('rgb')]
            ]
        };
    };

    // works if you comment this out.
    //colors = $.map(colors, applyGradient);

    $('#container').highcharts({
        colors: colors,
        title: {
            text: 'Points with zero value are not connected by line'
        },
        xAxis: {
            categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
            offset: 0,
        },
        plotOptions: {
            series: {
                connectNulls: true
            }
        },
        yAxis: {
            min: 0,
        },
        series: [{
            data: [2, 10, 40, 40, 40, 40, 40, 40, 40, 40, 30, 20],
            marker: {
                fillColor: applyGradient(colors[0])
            }
        }, {
            data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
            marker: {
                fillColor: applyGradient(colors[1])
            }
        }, ]

    });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.highcharts.com/stock/highstock.js"></script>
<div id="container" style="height: 300px"></div>


Related Articles