PPD-C

by Eskel

HTML

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

<div id="container" style="min-width: 850px; height: 500px; margin: 0 auto"></div>

JavaScript

var chart;
var options = {
  chart: {
		renderTo: 'container',
    type: 'spline',
    width: 850,
    height: 500,
    spacingTop: 40,
    spacingBottom: 15,
    spacingLeft: 15,
    spacingRight: 15
  },
  credits: {
    enabled: false
  },
  exporting: {
    enabled: false
  },
  title: {
    text: null
  },
  xAxis: {
    offset: 0,
    minTickInterval: 1,
    type: 'linear',
    gridLineColor: '#ffffff',
    gridLineDashStyle: "Solid",
    gridLineWidth: 1,
    lineColor: '#ddd',
    tickColor: '#fff',
    tickPosition: 'inside',
    labels: {
      style: {
        fontWeight: 'bold'
      }
    }
  },
  yAxis: {
    offset: 0,
    min: 2000,
    tickInterval: 1000,
    gridLineColor: '#ddd',
    title: {
      text: null
    },
    labels: {
      format: '{value:,.0f} Kč'
    }
  },
  plotOptions: {
    spline: {
      linecap: 'square',
      dataLabels: {
        enabled: false
      },
      states: {
        hover: {
          lineWidthPlus: 0,
          enabled: true,
          halo: false
        }
      },
      marker: {
        symbol: 'circle',
        fillColor: '{point.color}',
        radius: 6,
        enabled: false,
        states: {
          hover: {
            lineWidthPlus: 3
          }
        },
      }
    }
  },
  tooltip: {
    enabled: true,
    hideDelay: 10,
    animation: true,
    backgroundColor: '#f5f5f5',
    borderWidth: 0,
    shadow: false,
    pointFormat: '{series.name}: <b>{point.y} Kč</b>'
  },
  legend: {
    margin: 50,
    itemDistance: 50
  },
  series: [{
    name: 'MND',
    color: 'rgba(168, 190, 50, 1)',
    lineWidth: 6,
    zIndex: 100,
    marker: {
      radius: 8,
    },
    dataLabels: {
      enabled: true,
      color: '#a8be32',
      format: '{y:,.0f} Kč',
      style: {
      	'textShadow': '0px 0px 5px white'
      },
      y: 30
      //formatter: function(){return this.y + ' Kč'}
    }
  }, {
    name: 'RWE',
    color: 'rgba(0, 111, 192, 1)',
    lineWidth: 3
  }, {
    name: 'E.ON',
   ...