Single line series - CSS

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: 700px; min-width: 310px"></div>

CSS

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

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

/* Rangefinder CSS */
.highcharts-button-box {
 fill: rgba(24,181,187,1);
}

.highcharts-button-pressed .highcharts-button-box {
  fill: #054f64;
}
.highcharts-button text {
  fill: #ffffff;
}
.highcharts-range-selector-buttons text{
    fill: #ffffff;
}

/* Gridlines and plotlines */ 
.highcharts-plot-line {
    fill: none;
    stroke: rgba(24,181,187,0.5);
    stroke-width: 1px;
     stroke-dasharray:3,1
   
}
.highcharts-grid-line {
    fill: none;
    stroke: rgba(24,181,187,0.2);
}
.highcharts-color-0 {
    stroke: rgba(24,181,187,1);
    fill: rgba(24,181,187,1);
}
.highcharts-plot-line-label {
      fill: rgba(24,181,187,1);
      stroke: rgba(24,181,187,1);

}

/* 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(24,181,187,1);
}

/* Axis */ 

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

.highcharts-yaxis-labels {
    fill: rgba(24,181,187,0.2);
    font-size: 0.9em;
}

/* Navigator and scroll bar tweaks */ 
.highcharts-navigator-mask-inside {
    fill: rgba(24,181,187,0.6);
    fill-opacity: 0.25;
    cursor: ew-resize;
}
.highcharts-navigator-xaxis {
	stroke: rgba(24,181,187,.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(24,181,187,1);
    stroke: rgba(24,181,187,1);
    stroke-width: 1px;
}
.highcharts-navigator-series {
    fill: rgba(24,181,187,1);
    stroke: rgba(24,181,187,1);
}
.highcharts-navigator-xaxis .highcharts-grid-line {
    stroke-width:...

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,
                        dashStyle: 'shortdash',
                        width: 1,
                        label: {
                            text: 'Minimum ' + this.yAxis[0].getExtremes().dataMin + '',
                          
                            id: 'plotlinemin',
                            x: 30,
                            y: 15
                        }
                    });
                },
            }
    },
    
        yAxis: {
        	labels: {
          	  align: 'right',
          	  x: 0,
          	  y: -8
       		 },
    },
            xAxis: {
                    tickLength: 8,
                    type:...