Week price JSON

author(s): Torstein Hønsi

by pepperdigital

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>

<figure class="highcharts-figure">

<div id="container" style="height: 170px; width: 300px; margin-top: 2em"></div>
</figure>

CSS

@import 'https://code.highcharts.com/css/highcharts.css';

/* General */ 
.highcharts-background {
    fill: rgb(3,65,88);
}

/* Gridlines and plotlines */ 
.highcharts-area {
    fill-opacity: 0.3;
}
.highcharts-graph {
    fill: none;
    stroke-width: 2px;
    stroke: rgba(255,255,255,1);
    }

.highcharts-plot-line {
    fill: none;
    stroke: rgba(249,166,48,0);
    stroke-width: 1px;
     stroke-dasharray:3,1
   
}
.highcharts-grid-line {
    fill: none;
    stroke: rgba(249,166,48,0);
}
.highcharts-color-0 {
    stroke: rgba(249,166,48,0);
    fill: rgba(249,166,48,0);
}
.highcharts-plot-line-label {
      fill: rgba(249,166,48,0);
      stroke: rgba(249,166,48,0);

}

/* Tooltips */
.highcharts-tooltip-box .highcharts-label-box {
    fill: rgb(255, 255, 255);
    fill-opacity: 1;
    stroke-width: 0px;
}
.highcharts-markers {
    stroke-width: 2px;
    fill: rgba(249,166,48,1);
}

/* Axis */ 
.highcharts-axis-line {
    fill: none;
    stroke: rgba(249,166,48,0);
}
.highcharts-axis-labels {
    fill: #ffffff;
    font-size: 0.9em;
    font-family: sans-serif;
}

.highcharts-yaxis-labels {
    fill: rgba(249,166,48,0.2);
    font-size: 0.9em;
}

/* Navigator and scroll bar tweaks */ 
.highcharts-navigator-mask-inside {
    fill: rgba(249,166,48,0.6);
    fill-opacity: 0.25;
    cursor: ew-resize;
}
.highcharts-navigator-xaxis {
	stroke: rgba(249,166,48,.5);
}
.highcharts-navigator-xaxis.highcharts-axis-labels {
    fill: rgba(255,255,255);
}
.highcharts-scrollbar-track {
    fill: rgba(255,255,255,0.1);
    stroke: rgba(255,255,255,0.1);
}
.highcharts-scrollbar-thumb {
    fill: rgba(249,166,48,1);
    stroke: rgba(249,166,48,1);
    stroke-width: 1px;
}
.highcharts-navigator-series {
    fill: rgba(249,166,48,1);
    stroke: rgba(249,166,48,1);
}
.highcharts-navigator-xaxis .highcharts-grid-line {
    stroke-width: 1px;
    stroke: rgba(249,166,48,0.2);
}
.highcharts-navigator-handle {
    stroke: rgba(249,166,48,1);
    fill: rgba(255,255,255,1);
   ...

JavaScript

Highcharts.getJSON('https://demo-live-data.highcharts.com/aapl-c.json', function (data) {
    // Create the chart
Highcharts.chart('container', {
    chart: {
        type: 'area'
        },
       credits: {
        enabled: false
    },
         styledMode: true,

     exporting: {
        enabled: false
    },
    title: {
        text: ''
    },
  
    legend: {
        enabled: false
    },
    xAxis: {
         labels: {
            enabled: false
        },
        
    },
    yAxis: {
     labels: {
            enabled: false
        },
        title: {
            text: ''
        }
        
    },
    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
                }
    },
    credits: {
        enabled: false
    },
    series: [{
        name: 'John',
        data: data
    }]
});
});