Highcharts Demo

author(s): Torstein Hønsi

by Christian Sonne

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>

<div id="container"></div>

CSS

@import 'https://code.highcharts.com/css/highcharts.css';
#container {
	min-width: 320px;
	height: 400px;
	margin: 0 auto;
}

.highcharts-legend-series-active g.highcharts-series:not(.highcharts-series-hover),
.highcharts-legend-point-active .highcharts-point:not(.highcharts-point-hover),
.highcharts-legend-series-active .highcharts-markers:not(.highcharts-series-hover),
.highcharts-legend-series-active .highcharts-data-labels:not(.highcharts-series-hover) {
  opacity: 1;
}
.highcharts-legend-item > * {
  transform: translate(50px, 3px);
}
.highcharts-legend-item:first-child > * {
  transform: translate(-50px, 3px);
}
.y0 text {
  fill: #7cb5ec;
}
.y1 text {
  fill: #434348;
}
.y2 text {
  fill: #90ed7d;
}

JavaScript

Highcharts.chart('container', {
		credits: {enabled: false},
    chart: {
    	styledMode: true
    },
    title: {
        text: 'Indoor',
        align: 'left'
    },
    plotOptions: {
    	series: {
      	marker: {
            enabled: false
        },
      }
    },
    xAxis: [{
        categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
            'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
        crosshair: true
    }],
    yAxis: [{ // Primary yAxis
				className: 'y0',
        title: {
            text: undefined
        }

    }, { // Secondary yAxis
    		className: 'y1',
        gridLineWidth: 0,
        title: {
            text: undefined,
        },
        opposite: true

    }, { // Tertiary yAxis
    		className: 'y2',
        gridLineWidth: 0,
        title: {
            text: undefined
        },
        opposite: true
    }],
    tooltip: {
        shared: true
    },
    legend: {   
    },
    series: [{
        name: 'Rainfall (mm)',
        type: 'spline',
        data: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
        tooltip: {
            valueSuffix: ' mm'
        },
        events: {
            legendItemClick: function() {
              return false;
            }
        }

    }, {
        name: 'Sea-Level Pressure (mb)',
        type: 'spline',
        yAxis: 1,
        data: [1016, 1016, 1015.9, 1015.5, 1012.3, 1009.5, 1009.6, 1010.2, 1013.1, 1016.9, 1018.2, 1016.7],
        dashStyle: 'shortdot',
        tooltip: {
            valueSuffix: ' mb'
        },
        events: {
            legendItemClick: function() {
							this.chart.series[2].setVisible(false);
              return !this.visible;
            },
            legendItemHover: function() {
            	return false;
            }
        }

    }, {
        name: 'Temperature (℃)',
				yAxis: 2,
        type: 'spline',
        data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6],
        tooltip:...