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:first-child {
  paddin;
}

JavaScript

Highcharts.chart('container', {
  "credits": {
    "enabled": false
  },
  "chart": {
    "type": "spline",
    "plotBackgroundColor": "#E8F0F0",
    "backgroundColor": "rgba(255, 255, 255, 0.0)"
  },
  "time": {
    "timezoneOffset": -120
  },
  "title": {
    "text": "Heating and cooling",
    "align": "left"
  },
  "yAxis": [
    {
      "title": {
        "text": "°C"
      },
      "visible": true
    },
    {
      "title": {
        "text": "°C"
      },
      "visible": true
    },
    {
      "title": {
        "text": "°C"
      },
      "visible": true
    }
  ],
  "xAxis": {
    "lineWidth": 2,
    "lineColor": "#6A6A6A",
    "tickColor": "#6A6A6A",
    "tickWidth": 2,
    "tickmarkPlacement": "center",
    "labels": {
      "y": 25,
      "style": {
        "fontSize": "12px"
      }
    },
    "type": "datetime",
    "min": 1567980000000,
    "max": 1568066399999
  },
  "plotOptions": {
    "series": {
      "marker": {
        "enabled": false
      },
      "animation": false
    },
    "areaspline": {
      "fillOpacity": 0.5
    }
  },
  "legend": {
    "enabled": false
  },
  "tooltip": {
    "backgroundColor": "#FFFFFF",
    "useHTML": true,
    "headerFormat": "<span style='font-size: 14px'>{point.key}</span><br/>",
    "style": {
      "fontSize": "18px"
    }
  },
  "series": [
    {
      "data": [
        [
          1567980000000,
          12.3
        ],
        [
          1567980300000,
          12.800000000000002
        ],
        [
          1567980600000,
          13.6
        ],
        [
          1567980900000,
          14.1
        ],
        [
          1567981200000,
          12.6
        ],
        [
          1567981500000,
          12.5
        ],
        [
          1567981800000,
          13.3
        ],
        [
          1567982100000,
          14.1
        ],
        [
          1567982400000,
          13.3
        ],
        [
          1567982700000,
          12.3
        ],
        [
         ...