Highcharts Demo

author(s): Torstein Hønsi

by yasemin Cerrahoğlu

HTML

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>

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

JavaScript

Highcharts.SVGRenderer.prototype.symbols.cross = function (x, y, w, h) {
    return ['M', x, y, 'L', x + w, y + h, 'M', x + w, y, 'L', x, y + h, 'z'];
};
if (Highcharts.VMLRenderer) {
    Highcharts.VMLRenderer.prototype.symbols.cross = Highcharts.SVGRenderer.prototype.symbols.cross;
}

Highcharts.chart('container', {
    chart: {
        type: 'column'
    },
    title: {
        text: null
    },
    xAxis: {
        categories: [
            'Jongvee > 10mnd',
            'Vaarzen',
            'Jongvee < 10mnd',
            'Droge koeien',
            'Verse Koei',
            'Kalveren',
            'Melkkoein',
            'Afbouw groep',
        ]
    },
    yAxis: [{
        min: 0,
        title: {
            text: null
        }
    }, ],
    legend: {
        shadow: false
    },
    tooltip: {
        shared: true
    },
    plotOptions: {
        column: {
            grouping: false,
            shadow: false,
            borderWidth: 0
        }
    },
    series: [{
        name: 'Actual Height',         
        color: 'rgba(27,163,27,1)',
        data: [25, 85, 96,75, 86, 45, 96, 20],
      
        pointPadding: 0.2,
        pointPlacement: -0.1
    }, {
        name: 'Planned Height',
        color: 'rgba(118,118,118,.8)',
        data: [150, 73, 20,150, 73, 20, 73, 80],
        pointPadding: 0.2,
        pointPlacement: 0.1
    }]
});