Bubble Chart

by jlbriggs

HTML

<script src="http://highcharts.com/js/testing.js"></script>
<div id="container" style="height:500px"></div>

JavaScript

var chart = new Highcharts.Chart({
    chart: {
        renderTo:'container',
        defaultSeriesType:'scatter',
        borderWidth:1,
        borderColor:'#ccc',
        marginLeft:110,
        marginRight:50,
        backgroundColor:'#eee',
        plotBackgroundColor:'#fff',
    },
    title:{
        text:'Chart Title'
    },
    legend:{
                                     
    },
    plotOptions: {
        series: {
            shadow:false,
        }
    },
    xAxis:{
        minPadding:.075,
        maxPadding:.075,
        lineColor:'#999',
        lineWidth:1,
        tickColor:'#666',
        tickLength:3,
        title:{
            text:'X Axis Title'
        }
    },
    yAxis:{
        lineColor:'#999',
        lineWidth:1,
        tickColor:'#666',
        tickWidth:1,
        tickLength:3,
        gridLineColor:'#ddd',
        title:{
            text:'Y Axis Title',
            rotation:0,
            margin:50,
        }
    },
    series: [{
        marker:{
            symbol:'circle',
            fillColor:'rgba(24,90,169,.5)',
            lineColor:'rgba(24,90,169,.75)',
            lineWidth:1,
            color:'rgba(24,90,169,1)',
            states:{
                hover:{
                    enabled:false
                }
            }
        },
        data: [{x:2,y:3,marker:{radius:5}},
               {x:3,y:12,marker:{radius:10}},
               {x:5,y:6,marker:{radius:15}},
               {x:1,y:7,marker:{radius:25}},
               {x:7,y:18,marker:{radius:18}},
               {x:4,y:10,marker:{radius:14}},
               {x:4,y:3,marker:{radius:16}}]
       },{
        marker:{
            symbol:'circle',
            fillColor:'rgba(238,46,47,.5)',
            lineColor:'rgba(238,46,47,.75)',
            lineWidth:1,
            color:'rgba(238,46,47,1)',
            states:{
                hover:{
                    enabled:false
                }
            }
        },
        data: [{x:3,y:5,marker:{radius:7}},
  ...