JSFiddle - React, Tailwind, and code Playground

by jwinkle

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="container"></div>

JavaScript

var chart = Highcharts.chart('container', {

    chart: {
        type: 'line',
    },

    plotOptions: {
        series: {
            marker: {
                enabled: false,                // disable static point markers
            },
            states: {
                inactive: {
                    opacity: 1,                // disable lines from fading away
                },
            },
            pointStart: 1643410800000,
            pointInterval: 3600000,
        },
    },

    title: {
        text: 'Legend symbolColor oddity when using linearGradient with type line but no marker in HC v9.3.2',
    },

    xAxis: {
        type: 'datetime',
    },

    yAxis: {
        softMin: 0,
        max: 100,
    },

    series: [{
        name: 'purple', lineWidth: 3, color: {
            linearGradient: [ 00, 00, 00, 350 ],
            //linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1, },
            stops: [
                [0, 'purple'], // start 
                [1, 'black'] // end
            ], 
        }, data: [ 100, 95, 80, 60, 35, 50, 20, 10, 3, 2, 30, 40, ],
    },{
        name: 'green', lineWidth: 3, color: {
            //linearGradient: [ 00, 00, 00, 350 ], 
            linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1, },
            stops: [
                [0, 'green'], // start 
                [1, 'black'] // end
            ], 
        }, data: [ 100, 100, 95, 80, 60, 35, 50, 20, 10, 3, 2, 30, ],
    }],
});