How to change the radius of the data point dots depending on the value/count in the data-yaxis-HIGHCHARTS

0
votes

I have a chart of type"scatter" that I want to change the size of the data point dots, depending on the value at the y axis. fiddle: http://jsfiddle.net/g14dkv63/1/ the above example sets the radius of the dots to '8', 

plotOptions: {
        series: {
            marker: {
                radius: 8
            }
        }
    },

however is it possible to set the radius dynamically depending on the count/value of the dot, given the range of radius between 2px to 20px, 2px for the min value and 20px for the max value.

2
highcharts

2 Answers

3
votes

Each point can have a different marker radius, so map your points to:

{
   y: value, 
   marker: {
     radius: /* calculated radius */
   }
}

Mapping data:

var dataMax = Math.max.apply(null, data)
var dataMin = Math.min.apply(null, data)
var range = dataMax - dataMin
var rMax = 20
var rMin = 2

var mappedData = data.map(v => {
  var relSize = ((v - dataMin) / range)
  var radius = Math.floor(rMin + relSize * (rMax - rMin))

  return {
    y: v,
    marker: {
      radius: radius
    }
  }
})

example: http://jsfiddle.net/2faLd444/

One note about the size of the bubble:

The human visual system naturally experiences a disk's size in terms of its area. And the area of a disk—unlike its diameter or circumference—is not proportional to its radius, but to the square of the radius. So if one chooses to scale the disks' radii to the third data values directly, then the apparent size differences among the disks will be non-linear and misleading. To get a properly weighted scale, one must scale each disk's radius to the square root of the corresponding data value v3

src: https://en.wikipedia.org/wiki/Bubble_chart#Choosing_bubble_sizes_correctly

So according to that note, if you want the bubbles to be proportional you need to take the square of the radius.

-1
votes

You can use a bubble chart for this (needs highcharts-more.js). When you use categories (as in your chart), each item in the data array needs to be an array with two elements: the Y value and the bubble size.

Highcharts.chart('container', {
  chart: {
    type: 'bubble'
  },
  xAxis: {
    categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
  },
  series: [{
    data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
           .map(function(x) { return [x, x]; })
  }]
});

http://jsfiddle.net/g14dkv63/2/