High chart area fill

Question

I'm using highstock chart area. What I'm trying to achieve if possible is when the chart is initially drawn the area portion to be one color. When the user selects other options then the lines that are drawn come in another color. I've tried using the the highcharts theme and i've also set the highcharts setOptions. I also tried the plotOptions. When clicked it works as normal adds the additional line as black. But when clicked again it adds another line but as gray. The gray on gray when there are lots of lines some just can be seen.

Attached is what the chart looks like

Here is my code: ` Highcharts.setOptions({ colors: ['#778899','#000000'] });

$(selector).highcharts('StockChart', {


    chart: {
        height: 600,
        borderRadius: 0
    },
    credits: { 'enabled': false },
    legend: {
        enabled: true,
        borderRadius: 1,
        borderWidth: 0,
        itemStyle: {
            fontSize: '11px'                
        },
        itemHiddenStyle: {
            color: '#999999'
        }
    } 



    plotOptions: {
        series: { lineWidth: 1 },
    area:{colors:['#000000']}
    }

});`

Answer 1

You defined only 2 colors: #778899','#000000'. So when you add 3rd line it is gray, 4th line would be black, and so on. Example with 4 lines: http://jsfiddle.net/dpb3vcy0/1/

$(function () {
    // Create the chart
    Highcharts.setOptions({
        colors: ['#778899', '#000000']
    });

    $('#container').highcharts('StockChart', {

        rangeSelector: {
            inputEnabled: $('#container').width() > 480,
            selected: 1
        },

        series: [{
            name: 'nr 1',
            data: [5, 1, 1],
            type: 'area',
            threshold: null,
            tooltip: {
                valueDecimals: 2
            },
            fillColor: {
                linearGradient: {
                    x1: 0,
                    y1: 0,
                    x2: 0,
                    y2: 1
                },
                stops: [
                    [0, Highcharts.getOptions().colors[0]],
                    [1, Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0).get('rgba')]
                ]
            }
        }, {
            name: 'nr 2',
            data: [0, 0, 5, 5],
            type: 'area',
            threshold: null,
            tooltip: {
                valueDecimals: 2
            },
            fillColor: {
                linearGradient: {
                    x1: 0,
                    y1: 0,
                    x2: 0,
                    y2: 1
                },
                stops: [
                    [0, Highcharts.getOptions().colors[0]],
                    [1, Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0).get('rgba')]
                ]
            }
        }, {
            name: 'nr 3',
            data: [0, 0, 0, 2, 2, 7],
            type: 'area',
            threshold: null,
            tooltip: {
                valueDecimals: 2
            },
            fillColor: {
                linearGradient: {
                    x1: 0,
                    y1: 0,
                    x2: 0,
                    y2: 1
                },
                stops: [
                    [0, Highcharts.getOptions().colors[0]],
                    [1, Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0).get('rgba')]
                ]
            }
        }, {
            name: 'nr 4',
            data: [0, 0, 0, 0, 0, 1, 1, 4],
            type: 'area',
            threshold: null,
            tooltip: {
                valueDecimals: 2
            },
            fillColor: {
                linearGradient: {
                    x1: 0,
                    y1: 0,
                    x2: 0,
                    y2: 1
                },
                stops: [
                    [0, Highcharts.getOptions().colors[0]],
                    [1, Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0).get('rgba')]
                ]
            }
        }]
    });
});