Highcharts Demo

author(s): Torstein Hønsi

by smeijers

HTML

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

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

<div id="container"></div>

CSS

#container {
  min-width: 310px;
  max-width: 800px;
  height: 400px;
  margin: 0 auto
}

JavaScript

Highcharts.chart('container', {

  title: {
    text: 'Predicted margin'
  },
  xAxis: {
    categories: [0, 25, 50, 100, 125, 150, 175, 200, 225, 250, 275, 300, 325, 350, 375, 400, 0, 25, 50, 100, 125, 150, 175, 200, 225, 250, 275, 300, 325, 350, 375, 400, 0, 25, 50, 100, 125, 150, 175, 200, 225, 250, 275, 300, 325, 350, 375, 400],

    plotLines: [{
      color: 'red', // Color value
      dashStyle: 'line', // Style of the plot line. Default to solid
      value: 20, // Value of where the line will appear
      width: 1, // Width of the line   
      zIndex: 1
    }],
    plotBands: [{
      from: 0,
      to: 16,
      color: '#EFFFFF',
      label: {
        text: 'Lactation 1',
        style: {
          color: '#999999'
        },
        y: 30
      }
    }, {
      from: 16,
      to: 32,
      color: '#FFFFEF',
      label: {
        text: 'Lactation 2',
        style: {
          color: '#999999'
        },
        y: 30
      }
    }, {
      from: 32,
      to: 48,
      color: '#FFEFFF',
      label: {
        text: 'Lactation 3',
        style: {
          color: '#999999'
        },
        y: 30
      }
    }]

  },



  yAxis: {
    title: {
      text: 'Predicted margin'
    },
    plotBands: [{
      from: -3,
      to: 0,
      color: 'rgba(255,200,220,.75)'
    }]

  },
  legend: {
    layout: 'vertical',
    align: 'right',
    verticalAlign: 'middle'
  },
  tooltip: {
    crosshairs: true,
    shared: true
  },

  plotOptions: {
    series: {
      label: {
        connectorAllowed: false

      },
      marker: {
        radius: 0,

      }
    }

  },

  series: [{
      name: 'Farm average',
      color: 'black',
      lineWidth: 1,
      data: [-1.2, 1.4, 4.1, 6.5, 7.6, 7.5, 6.9, 5.9,
        4.6, 2.8, 2.1, 1.1, 0.3, -1.2, -1.2, -1.2,

        -1.2, 1.4, 4.1, 6.5, 7.6, 7.5, 6.9, 5.9,
        4.6, 2.8, 2.1, 1.1, 0.3, -1.2, -1.2, -1.2,

        -1.2, 1.4, 4.1, 6.5, 7.6, 7.5, 6.9, 5.9,
        4.6, 2.8, 2.1, 1.1, 0.3, -1.2, -1.2, -1.2
   ...