- Highcharts Tutorial
- Highcharts - Home
- Highcharts - Overview
- Highcharts - Environment Setup
- Highcharts - Configuration Syntax
- Highcharts - Line Charts
- Highcharts - Area Charts
- Highcharts - Bar Charts
- Highcharts - Column Charts
- Highcharts - Pie Charts
- Highcharts - Scatter Charts
- Highcharts - Bubble Charts
- Highcharts - Dynamic Charts
- Highcharts - Combinations
- Highcharts - 3D Charts
- Highcharts - Angular Gauges
- Highcharts - Heat Maps
- Highcharts - Tree Maps
- Highcharts Useful Resources
- Highcharts - Quick Guide
- Highcharts - Useful Resources
- Highcharts - Discussion
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
<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
Advertisements
To Continue Learning Please Login
Login with Google