Highcharts Demo

author(s): Torstein Hønsi

HTML

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

<div id="container" style="height: 400px; width: 500px"></div>
<div id="factor-popup" style="border: 1px solid black" hidden>
  <div id="factor-popup-content"/>
</div>

JavaScript

$(function() {
  $('#container').highcharts({
    "chart": {
      "events": {

      },
      "zoomType": "x",
      "animation": false,
      "type": "spline",
      "zoneAxis": "x",
      "height": 150
    },
    "title": {
      "align": "left",
      "margin": 8,
      "x": 0,
      "y": 5,
      "style": {
        "fontFamily": "Metric, Arial, sans-serif",
        "fontSize": "18px",
        "fontWeight": 600
      },
      "useHTML": true,
      "text": "Metric"
    },
    "credits": {
      "enabled": false
    },
    "exporting": {
      "enabled": false
    },
    "xAxis": {
      "type": "datetime",
      "minpadding": 0,
      "crosshair": {
        "dashStyle": "dash",
        "color": "purple",
        "zIndex": 4
      },
      "tickmarkPlacement": "on",
      "labels": {
        "enabled": true
      },
      "events": {

      },
    },
    "yAxis": {
      "minPadding": 0,
      "maxPadding": 0,
      "gridLineWidth": 0,
      "labels": {
        "align": "left",
        "x": 0,
        "y": -2
      },
      "title": {
        "style": {
          "fontFamily": "Metric, Arial, sans-serif",
          "fontSize": "14px",
          "fontWeight": "normal",
          "color": "#4D759E"
        },
        "text": "ms"
      }
    },
    "tooltip": {
      "positioner": function() {
        var x = this.chart.chartWidth - this.label.width - 10,
          y = 1;
        return {
          x: x,
          y: y
        };
      },
      "animation": false,
      "borderWidth": 0,
      "backgroundColor": "none",
      "useHTML": true,
      "split": false,
      "shared": true,
      "headerFormat": "",
      "shadow": false,
      "style": {
        "fontFamily": "Metric, Arial, sans-serif",
        "fontSize": "16px",
        "fontWeight": "normal"
      }
    },
    "legend": {
      "enabled": false
    },
    "plotOptions": {
      "column": {
        "pointPlacement": "on"
      },
      "series": {
        "animation": false,
        "marker": {
 ...