Highcharts Demo

author(s): Torstein Hønsi

by Chitkala More

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: 320px; max-width: 600px; height:600px; margin: 0 auto;"></div>

JavaScript

Highcharts.setOptions({
colors: ['#fcbf70']
});
Highcharts.chart('container', {

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

    title: {
        text: 'Highcharts bubbles with radial gradient fill'
    },

    xAxis: {
        gridLineWidth: 0,
         min: 71,
         max: 80,
    },
    

    yAxis: {
     gridLineWidth: 0,
     min: 85,
     max: 150,
        startOnTick: false,
        endOnTick: false
    },
     plotOptions: {
        series: {
            dataLabels: {
                enabled: true,
                format: '{point.name}'
            }
        }
    },

    series: [{
        data: [   
       
            { x: 73, y: 124.5, z: 60, name: 'D'},
            { x: 74, y: 130, z: 180, name: 'CKD'},
            { x: 75.5, y: 135.9, z: 260, name: 'CPOD'},
            { x: 77, y: 130, z: 200, name: 'AMI'},
            { x: 77.5, y: 120.4, z: 60, name: 'A'},
            { x: 77.5, y: 117, z: 70, name: 'HIV'},
            { x: 77.4, y: 110, z: 60, name: 'O'},
             { x: 76.6, y: 107, z: 65.7, name: 'AD'},
             { x: 75.3, y: 105, z: 200, name: 'ASD'},
              { x: 74, y: 106, z: 70, name: 'CO'},
              { x: 73.3, y: 109, z: 60, name: 'M'},
               { x: 73.2, y: 118, z: 120, name: 'HF'},
               { x: 74.6, y: 122, z: 120, name: 'AF'},
            { x: 76, y: 124, z: 80, name: 'CKD1'},
            { x: 75.2, y: 127, z: 60, name: 'F'},      
            
        ],
        marker: {
          fillColor: '#fcbf70'            
        }
    }]

});