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: 600px; 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
    },

    series: [
    {
    name: 'All ages',
        data: [
            [2012, 81, 63],

        ],
        marker: {
            		fillColor: '#86bc25',
             		lineWidth: 0,
                lineColor: null // inherit from series
        }
    },{
    name: '18-24',
        data: [
            [2012, 81, 63],

        ],
        marker: {
            		fillColor: '#00a3e0',
             		lineWidth: 0,
                lineColor: null // inherit from series
        }
    },
    {
    name: '25-34',
        data: [
            [2012, 81, 63],

        ],
        marker: {
            		fillColor: '#43b02a',
             		lineWidth: 0,
                lineColor: null // inherit from series
        }
    },
    {
 
    name: '35-44',
        data: [
            [2012, 81, 63],

        ],
        marker: {
            		fillColor: '#0076a8',
             		lineWidth: 0,
                lineColor: null // inherit from series
        }
    },{
    name: '45-54',
        data: [
            [2012, 81, 63],

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

        ],
        marker: {
            		fillColor: '#86bc25',
             		lineWidth: 0,
                lineColor: null // inherit from series
        }
    }]

});