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 Query

More Query from same tag