Highcharts Demo

author(s): Torstein Hønsi

by Michel Penke

HTML

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

CSS

title: {
        text: 'Jobsuchen in Deutschland'
    },

    subtitle: {
        text: 'Akkumulierte Zahl der monatlichen Jobsuchen in Deutschland (2011-2018)'
    },

    yAxis: {
        title: {
            text: 'Number of Employees'
        }
    },
    xAxis: {
        categories: ['Jan', 'Feb', 'Mar']
    },
    legend: {
        layout: 'vertical',
        align: 'right',
        verticalAlign: 'middle'
    },

    plotOptions: {
        series: {
            label: {
                connectorAllowed: true
            },
            pointStart: 2010, 
            marker: {
                enabled: false, 
                symbol: 'circle'
            }
        }
    },

    series: [{
        name: 'Helfer',
        data: [1893507, 2056324, 1988583]
    }, {
        name: 'Fachkräfte',
        data: [2112996, 1839608, 1537633]
    }, {
        name: 'Spezialisten',
        data: [240258, 232953, 210229]
    }, {
        name: 'Experten',
        data: [314897, 341139, 265685]
    }],

    responsive: {
        rules: [{
            condition: {
                maxWidth: 500
            },
            chartOptions: {
                legend: {
                    layout: 'horizontal',
                    align: 'center',
                    verticalAlign: 'bottom'
                }
            }
        }]
    }

});

JavaScript

Highcharts.chart('container', {
    chart: {
        type: 'line'
    },
    title: {
        text: 'Jobsuchen in Deutschland'
    },
    subtitle: {
        text: 'Akkumulierte Zahl der monatlichen Jobsuchen in Deutschland (2011-2018)'
    },
    xAxis: {
        categories: ['2011', '2015', '2018'], 
        minPadding: 0,
      	maxPadding: 0
    },
    yAxis: {
        title: {
            text: 'Zahl der angebotenen Stellen'
        }
    },
    plotOptions: {
        line: {
            dataLabels: {
                enabled: false
            },
            enableMouseTracking: false
        }, 
        series: {
            label: {
                connectorAllowed: true
            },
            pointStart: 2010, 
            marker: {
                enabled: false, 
                symbol: 'circle'
            }
        }
    },
    series: [{
       name: 'Helfer',
        data: [1893507, 2056324, 1988583]
    }, {
        name: 'Fachkräfte',
        data: [2112996, 1839608, 1537633]
    }, {
        name: 'Spezialisten',
        data: [240258, 232953, 210229]
    }, {
        name: 'Experten',
        data: [314897, 341139, 265685]
    }]
});