Highcharts Demo

author(s): Torstein Hønsi

by pepperdigital

HTML

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

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

JavaScript

Highcharts.chart('container', {

    chart: {
        type: 'bubble',
        plotBorderWidth: 1,
        zoomType: 'xy'
    },

    title: {
        text: ''
    },

    xAxis: {
        gridLineWidth: 1
        
    },

    yAxis: {
        startOnTick: false,
        endOnTick: false,
        title: {
            text: ''
        },
    },

    series: [
    {
    name: 'All ages',
        data: [
            [2012,52,20],[2013,62,130],[2014,70,150],[2015,76,190],[2016,81,270],[2017,85,430],[2018,87,750]

        ],
        marker: {
            		fillColor: '#86bc25',
             		lineWidth: 0,
                lineColor: null // inherit from series
        }
    },{
    name: '18-24',
        data: [
            [2012,75,18],[2013,83,108],[2014,85,128],[2015,90,168],[2016,90,248],[2017,97,408],[2018,96,728]

        ],
        marker: {
            		fillColor: '#00a3e0',
             		lineWidth: 0,
                lineColor: null // inherit from series
        }
    },
    {
    name: '25-34',
        data: [
            [2012,71,16],[2013,84,86],[2014,84,106],[2015,89,146],[2016,91,226],[2017,92,386],[2018,95,706]

        ],
        marker: {
            		fillColor: '#43b02a',
             		lineWidth: 0,
                lineColor: null // inherit from series
        }
    },
    {
 
    name: '35-44',
        data: [
            [2012,66,14],[2013,74,64],[2014,81,84],[2015,85,124],[2016,91,204],[2017,92,364],[2018,91,684]

        ],
        marker: {
            		fillColor: '#0076a8',
             		lineWidth: 0,
                lineColor: null // inherit from series
        }
    },{
    name: '45-54',
        data: [
            [2012,49,12],[2013,60.2836879432624,42],[2014,67.0089858793325,62],[2015,76,102],[2016,82,182],[2017,86,342],[2018,89,662]

        ],
        marker: {
            		fillColor: '#0097a9',
             		lineWidth: 0,
                lineColor: null // inherit from series
        }
    }, {
    name: '55-75',
        data:...