Margin Details

by smeijers

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>

JavaScript

Highcharts.chart('container', {
  colors: ['#D2D200', '#666', '#FF9900', '#00559B', '#FF6400', '#006400',
    'rgba(124, 181, 236, 0.4)', 'rgba(226, 12, 25, 1)'
  ],
  chart: {
    type: 'column'
  },
  title: {
    text: 'Margin prediction next 12 months'
  },
  xAxis: [{
    categories: ['Mar', 'Apr', 'May', 'Jun',
      'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec','Jan', 'Feb'
    ],
    crosshair: true
  }],
  yAxis: {
    min: 0,
    title: {
      text: 'Euro'
    },

  },
  legend: {
    align: 'center',
    verticalAlign: 'bottom',
    backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || 'white',
    borderColor: '#CCC',
    borderWidth: 1,
    shadow: false
  },
  tooltip: {
    shared: true,
    headerFormat: '<b>{point.x}</b><br/>',
    pointFormat: '{series.name}: {point.y}<br/>'
  },
  credits: {
    enabled: false
  },

  plotOptions: {
    areaspline: {
      fillOpacity: 0.2
    },
    column: {
      stacking: 'normal',
      dataLabels: {
        enabled: false,
      }
    }
  },
  series: [

    {
      type: 'areaspline',
      name: 'Total income',
      color:'#ff9900',
      data: [
        15.23,
        15.33,
        15.43,
        15.54,
        15.55,
        15.61,
        15.58,
        15.59,
        15.51,
        15.47,
        15.48,
        15.53



      ],
      tooltip: {
        valuePrefix: '€ '
      },
      marker: {
        enabled: false
      },

    }, {
      name: 'Total cost',
      color:'#ff0000',
      type: 'areaspline',
      data: [
        10.19,
        10.21,
        10.13,
        10.13,
        10.00,
        9.92,
        9.87,
        9.82,
        9.79,
        9.83,
        9.84,
        9.77,

      ],
      tooltip: {
        valuePrefix: '€ '
      },
      marker: {
        enabled: false
      },
    },
    
    {
      name: 'Margin per cow per day',
      type: 'spline',
      color: '#006400',
      data: [
        5.04,
        5.11,
        5.30,
        5.41,
        5.55,
...