Highcharts Demo

author(s): Torstein Hønsi

by halloleo

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/series-label.js"></script>
<div id="container"></div>

CSS

#container {
  max-width: 800px;
  height: 400px;
  margin: 1em auto;
}

JavaScript

Highcharts.setOptions({
  lang: {
    months: ['januar', 'februar', 'mars', 'april', 'mai', 'juni', 'juli',
      'august', 'september', 'oktober', 'november', 'desember'
    ],
    weekdays: ['sundag', 'm�ndag', 'tysdag', 'onsdag', 'torsdag', 'fredag', 'laurdag']
  },
  colors: ['#DF5353', '#aaeeee', '#ff0066', '#eeaaee', '#DDDF0D', '#55BF3B', '#DF5353', '#7798BF', '#aaeeee', '#ff0066', '#eeaaee', '#DDDF0D', '#55BF3B', '#DF5353', '#7798BF', '#aaeeee']
});
Highcharts.chart('container', {
  chart: {
    borderColor: '#4572A7',
    plotBorderWidth: 1,
    plotBorderColor: '#CCCCCC',
    backgroundColor: '#222',
    plotShadow: true,
    type: 'spline'
  },
  title: {
    text: ''
  },
  xAxis: {
    type: 'datetime',
    lineWidth: 1,
    lineColor: '#CCCCCC',
    tickPixelInterval: 80,
    tickLength: 5,
    tickWidth: 1,
    tickColor: '#FFFFFF',
    tickPosition: 'outside', // 'inside' or 'outside'
    gridLineWidth: 1,
    gridLineColor: '#444444',
    labels: {
      formatter: function() {
        return Highcharts.dateFormat('%b', this.value);
      },
      align: 'left',
      x: 3
    },
    plotLines: [{
      value: Date.UTC(1971, 0, 1),
      color: '#444444',
      width: 3
    }],
    dateTimeLabelFormats: { // TODO: should this be a language setting as well?
      weekly: '%e. %b %y',
      twicemonthly: '%e. %b %y',
      monthly: '%b %y',
      twomonths: '%b %y',
      threemonths: '%b %y',
      fourmonths: '%b %y',
      sixmonths: '%b %y',
      yearly: '%Y'
    },
    showFirstLabel: true,
    showLastLabel: false,
    minRange: 30 * 24 * 3600 * 1000,
    startOnTick: true,
    endOnTick: true
  },
  yAxis: {
    min: 0, //0,
    max: 3.5,
    lineWidth: 1,
    lineColor: '#CCCCCC',
    tickPixelInterval: 50,
    tickLength: 5,
    tickWidth: 1,
    tickColor: '#FFFFFF',
    tickPosition: 'inside',
    gridLineWidth: 1,
    gridLineColor: '#444444',
    alternateGridColor: 'rgba(0, 0, 0, .2)',
    minorTickInterval: null,
   ...