Highcharts - 3D Bubble Chart

Following is an example of a 3D bubble chart.

We have already seen the configuration used to draw a chart in Highcharts Configuration Syntax chapter.

An example of a 3D bubble chart is given below.

Configurations

Let us now see the additional configurations/steps taken.

chart

Configure the chart type to be bubble based. chart.type decides the series type for the chart. Here, the default value is "line".

Configure the chart to make it zoomable. chart.zoomType decides in what dimensions the user can zoom by dragging the mouse. Here, the possible values are x, y or xy.

var chart = {
   type: 'bubble',
   zoomType: 'xy'
};

series.marker

Configure the marker of the series to be gradient based to give it a 3D feel.

marker: {
   fillColor: {
      radialGradient: { cx: 0.4, cy: 0.3, r: 0.7 },
      stops: [
         [0, 'rgba(255,255,255,0.5)'],
         [1, Highcharts.Color(
            Highcharts.getOptions().colors[0]).setOpacity(0.5).get('rgba')]
      ]
   }
}

Example

highcharts_bubble_3d.htm

Live Demo

<html>
   <head>
      <title>Highcharts Tutorial</title>
      <script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
      </script>
      <script src = "https://code.highcharts.com/highcharts.js"></script>
      <script src = "https://code.highcharts.com/highcharts-more.js"></script>
   </head>
   
   <body>
      <div id = "container" style = "width: 550px; height: 400px; margin: 0 auto"></div>
      <script language = "JavaScript">
         $(document).ready(function() {  
            var chart = {
               type: 'bubble',
               plotBorderWidth: 1,
               zoomType: 'xy'
            };
            var title = {
               text: 'Highcharts bubbles with radial gradient fill'   
            };   
            var xAxis = {
               gridLineWidth: 1
            };
            var yAxis = {
               startOnTick: false,
               endOnTick: false
            };
            var series = [
               {
                  data: [
                     [9,  81, 63],
                     [98, 5, 89],
                     [51, 50, 73],
                     [41, 22, 14],
                     [58, 24, 20],
                     [78, 37, 34],
                     [55, 56, 53],
                     [18, 45, 70],
                     [42, 44, 28],
                     [3,  52, 59],
                     [31, 18, 97],
                     [79, 91, 63],
                     [93, 23, 23],
                     [44, 83, 22]
                  ],
                  marker: {
                     fillColor: {
                        radialGradient: { cx: 0.4, cy: 0.3, r: 0.7 },
                        stops: [
                           [0, 'rgba(255,255,255,0.5)'],
                           [1, Highcharts.Color(
                           Highcharts.getOptions().colors[0]).setOpacity(0.5).get('rgba')]
                        ]
                     }
                  }
               }, 
               {
                  data: [
                     [42, 38, 20],
                     [6,  18,  1],
                     [1,  93, 55],
                     [57, 2,  90],
                     [80, 76, 22],
                     [11, 74, 96],
                     [88, 56, 10],
                     [30, 47, 49],
                     [57, 62, 98],
                     [4,  16, 16],
                     [46, 10, 11],
                     [22, 87, 89],
                     [57, 91, 82],
                     [45, 15, 98]
                  ],
                  marker: {
                     fillColor: {
                        radialGradient: { cx: 0.4, cy: 0.3, r: 0.7 },
                        stops: [
                           [0, 'rgba(255,255,255,0.5)'],
                           [1, Highcharts.Color(
                              Highcharts.getOptions().colors[1]).setOpacity(0.5).get('rgba')]
                        ]
                     }
                  }
               }
            ];
               
            var json = {};   
            json.chart = chart; 
            json.title = title;   
            json.xAxis = xAxis;   
            json.yAxis = yAxis;      
            json.series = series;   
            $('#container').highcharts(json);
         });
      </script>
   </body>
   
</html>

Result

Verify the result.

highcharts_bubble_charts.htm