score:0

enter image description here

what you need is areaspline property of highcharts with dark theme option.

here is an example;

$(function () {
$.getjson('https://www.highcharts.com/samples/data/jsonp.php?filename=usdeur.json&callback=?', function (data) {

    $('#container').highcharts({
        chart: {
            zoomtype: 'x'
        },
        title: {
            text: 'usd to eur exchange rate over time'
        },
        subtitle: {
            text: document.ontouchstart === undefined ?
                    'click and drag in the plot area to zoom in' : 'pinch the chart to zoom in'
        },
        xaxis: {
            type: 'datetime'
        },
        yaxis: {
            title: {
                text: 'exchange rate'
            }
        },
        legend: {
            enabled: false
        },
        plotoptions: {
            area: {
                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')]
                    ]
                },
                marker: {
                    radius: 2
                },
                linewidth: 1,
                states: {
                    hover: {
                        linewidth: 1
                    }
                },
                threshold: null
            }
        },

        series: [{
            type: 'area',
            name: 'usd to eur',
            data: data
        }]
    });
});

and this jsfiddle is the live form of above example.

what is important here is;

<script src="https://cdnjs.cloudflare.com/ajax/libs/highcharts/4.2.5/themes/dark-unica.js"></script>

line; which gives the dark theme to the chart.

score:1

follow the below code:

set below code in your javascript and change colors that you want like...

fillcolor : {
   lineargradient : {x1: 0, y1: 0, x2: 0, y2: 1},
   stops : [ [0, '#2a2a2b'], [1, '#3e3e40']],
}

below color is assign to line

[0, '#2a2a2b']

while

[1, '#3e3e40']

above one is for shaded region

i'm sure this will help you... you just need to add this code and change you color code that you like...

thanks...


Related Query

More Query from same tag