Ivy goers

HTML

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


<figure id="chart-container">
</figure>

JavaScript

Highcharts.chart('chart-container', {

    title: {
        text: 'Ivy goers',
        align: 'center'
    },


    yAxis: {
        title: {
            text: 'leavers'
        }
    },
  
    xAxis: {
      allowDecimals: false
    },

    legend: {
        layout: 'vertical',
        align: 'right',
        verticalAlign: 'middle'
    },

    plotOptions: {
        series: {
            label: {
                connectorAllowed: false
            },
            pointStart: 2020
        }
    },

    series: [{
        name: 'Kings',
        data: [
            4, 8, 15, 7, 6, 10
        ]
    }, {
        name: 'Paulines',
        data: [
            16, "NA", "NA", "NA", 17, 24
        ]
    }, {
        name: 'Paulinas',
        data: [
            "NA", "NA", 13, 8, 15, 11
        ]
    }, {
        name: 'West',
        data: [
            "NA", "NA", "NA", "NA", "NA", 28
        ]
    }, {
        name: 'Godolphin',
        data: [
            5, 5, 9, 5, 8,11
        ]
    }, {
        name: 'Latymer',
        data: [
            3,6,10,9,7,9
        ]
    }],

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

});