Single line series

author(s): Torstein Hønsi

by pepperdigital

HTML

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

<div id="container" style="height: 600px; min-width: 310px"></div>

CSS

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

/* General */ 
.highcharts-background {
    fill: #3d3d3d;
}

/* Gridlines and plotlines */ 
.highcharts-plot-line {
    fill: none;
    stroke: #ffd61f;
    stroke-width: 1px;
}
.highcharts-grid-line {
    fill: none;
    stroke: #cf0000;
}
.highcharts-color-0 {
    stroke: #cd915f;
}

/* Axis */ 

.highcharts-axis-labels {
    fill: #ffffff;
    font-size: 0.9em;
}

/* Navigator and scroll bar tweaks */ 
.highcharts-navigator-mask-inside {
    fill: rgba(217, 67, 0, 0.8);
    fill-opacity: 0.25;
    cursor: ew-resize;
}
.highcharts-navigator-xaxis {
	stroke: rgba(249,166,48,.5);
}
.highcharts-navigator-xaxis.highcharts-axis-labels {
    fill: #b60606;
}
.highcharts-scrollbar-track {
    fill: #cf1818;
    stroke: #f2f2f2;
}
.highcharts-scrollbar-thumb {
    fill: #10c0a3;
    stroke: #00e93aa1;
    stroke-width: 1px;
}

JavaScript

Highcharts.getJSON('https://www.highcharts.com/samples/data/aapl-c.json', function (data) {
    // Create the chart
    Highcharts.stockChart('container', {
   credits: {
        enabled: false
    },
     exporting: {
        enabled: false
    },
       chart: {
       style: {
            fontFamily: 'sans-serif'
        },
     styledMode: true,
        backgroundColor: '#034158',
        renderTo: 'container',
            events: {
                redraw: function() {
                    this.yAxis[0].removePlotLine();
                    this.yAxis[0].addPlotLine({
                        value: this.yAxis[0].getExtremes().dataMax,
                        color: 'rgba(249,166,48,.5)',
                        dashStyle: 'shortdash',
                        width: 1,
                        label: {
                            text: 'Maximum ' + this.yAxis[0].getExtremes().dataMax + '',
                            style: {
                                color: 'rgba(249,166,48,1)'
                            },
                            id: 'plotlinemax',
                            x: 30
                        }
                    });
                    this.yAxis[0].addPlotLine({
                        value: this.yAxis[0].getExtremes().dataMin,
                        color: 'rgba(249,166,48,.5)',
                        dashStyle: 'shortdash',
                        width: 1,
                        label: {
                            text: 'Minimum ' + this.yAxis[0].getExtremes().dataMin + '',
                            style: {
                                color: 'rgba(249,166,48,1)'
                            },
                            id: 'plotlinemin',
                            x: 30,
                            y: 15
                        }
                    });
                },
            }
    },
        yAxis: {
        	labels: {
          	  align: 'right',
          	  x: 0,
          	  y: -8
       		 },
       ...