Highcharts Demo

author(s): Torstein Hønsi

by AlexLvovsky

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>

<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>

JavaScript

Highcharts.chart('container', {
  "chart": {
    "backgroundColor": "transparent",
    "minPadding": 0,
    "maxPadding": 0,
    "spacingLeft": 0,
    "spacingRight": 0,
    "spacingBottom": 0,
    "spacingTop": 8,
    "style": {
      "fontFamily": "Segoe UI",
      "fontWeight": "600"
    },
    "subtitle": {
      "text": ""
    },
    "type": "areaspline"
  },
  "title": {
    "floating": true,
    "align": "left",
    "style": {
      "color": "#ebebeb",
      "fontSize": "13px"
    }
  },
  "colors": [
    "#0E6FC6",
    "#1BBC9B",
    "#6F32CE",
    "#A835B5",
    "#0E0E99",
    "#569AB2",
    "#845B13",
    "#8E0946",
    "#BC4F31",
    "#BFB028"
  ],
  "credits": {
    "enabled": false
  },
  "legend": {
    "itemStyle": {
      "fontWeight": "600",
      "fontSize": "11px"
    }
  },
  "xAxis": {
    "lineColor": "#939598",
    "lineWidth": 0.5,
    "minPadding": 0,
    "maxPadding": 0,
    "dateTimeLabelFormats": {
      "day": "%e. %b",
      "hour": "%H:%M",
      "millisecond": "%b %e"
    },
    "labels": {
      "style": {
        "fontSize": "9px",
        "color": "#939598",
        "fontWeight": "600"
      }
    },
    "tickColor": "#939598",
    "tickLength": 5,
    "type": "datetime"
  },
  "yAxis": {
    "gridLineWidth": 0,
    "lineColor": "#939598",
    "lineWidth": 0.5,
    "startOnTick": false,
    "offset": 0,
    "min": 0,
    "minRange": 0.1,
    "title": {
      "text": "Second/s",
      "margin": 5,
      "style": {
        "fontSize": "8px",
        "color": "#939598",
        "fontWeight": "600"
      }
    },
    "labels": {
      "style": {
        "fontSize": "9px",
        "color": "#939598",
        "fontWeight": "600"
      }
    }
  },
  "plotOptions": {
    "areaspline": {
      "lineWidth": 0,
      "stacking": "normal",
      "lineColor": "#666666",
      "fillOpacity": 1
    },
    "pie": {
      "shadow": false,
      "borderWidth": 0
    },
    "column": {
      "borderWidth": 0
    },
    "series": {
      "marker":...