Highcharts Demo

author(s): Torstein Hønsi

by klodoma

HTML

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

<div id="container" style="height: 400px;"></div>

JavaScript

Highcharts.setOptions({
  "exporting": {
    "enabled": false
  },
  "colors": ["#78C5D5", "#E2BC01", "#D7496A", "#009287", "#02609A", "#548A96", "#77C5D5", "#FFD400"],
  "tooltip": {
    "enabled": false
  },
  "chart": {
    "backgroundColor": "transparent",
    "borderWidth": 0,
    "plotShadow": false,
    "plotBorderWidth": 0
  },
  "title": {
    "style": {
      "color": "#073763",
      "fontSize": "32px",
      "fontFamily": "Myriad Pro",
      "fontWeight": "normal",
      "fontStyle": "normal"
    }
  },
  "subtitle": {
    "style": {
      "color": "#073763",
      "fontSize": "20px",
      "fontFamily": "Myriad Pro",
      "fontWeight": "normal",
      "fontStyle": "normal"
    }
  },
  "plotOptions": {
    "series": {
      "stacking": false,
      "enableMouseTracking": false,
      "dataLabels": {
        "allowOverlap": true
      }
    },
    "pie": {
      "depth": 100,
      "showInLegend": true
    }
  }
});

let chart = Highcharts.chart('container', {
  "title": {
    "style": {
      "color": "#073763",
      "fontSize": "32px",
      "fontFamily": "Myriad Pro",
      "fontWeight": "normal",
      "fontStyle": "normal"
    },
    "align": "left",
    "text": "The Outlook for Sterling",
    "margin": 0,
    "x": 37,
    "y": 37
  },
  "subtitle": {
    "style": {
      "color": "#073763",
      "fontSize": "20px",
      "fontFamily": "Myriad Pro",
      "fontWeight": "normal",
      "fontStyle": "normal"
    },
    "align": "left",
    "text": "Daily Chart",
    "margin": 0,
    "x": 400,
    "y": 58
  },
  "credits": {
    "enabled": true,
    "style": {
      "color": "#444444",
      "opacity": 0.5,
      "fontSize": "11px"
    },
    "position": {
      "align": "right",
      "x": 0,
      "verticalAlign": "bottom",
      "y": 0
    },
    "text": ""
  },
  "legend": {
    "enabled": false,
    "align": "left",
    "verticalAlign": "top",
    "layout": "horizontal",
    "floating": false,
    "x": 62,
    "y": 60,
    "backgroundColor":...