Highcharts : How to increase marker radius based on the value range in Y axis in Scatter Graph?

Question

I am using multiple series of data to plot the scatter graph..I want to increase the marker radius based on the value of x-axis. How can i achieve it.

Below is the jsfiddle code

Graph Code

 plotOptions: {
    scatter: {
        marker: {
                symbol : 'cricle',
            radius: 5,
            states: {
                hover: {
                    enabled: true,
                    lineColor: 'rgb(100,100,100)'
                }
            }
        },
        states: {
            hover: {
                marker: {
                    enabled: false
                }
            }
        }
    }
},



 series: [{
        name: 'Female',
        color: 'rgba(223, 83, 83, .5)',
        data: [[161.2, 51.6], [167.5, 59.0], [159.5, 49.2], [157.0, 63.0], [155.8, 53.6],
            [170.0, 59.0], [159.1, 47.6]]

}, {
    name: 'Male',
    color: 'rgba(119, 152, 191, .5)',
    data: [[174.0, 65.6], [175.3, 71.8], [193.5, 80.7], [186.5, 72.6], [187.2, 78.8],
        [181.5, 74.8], [184.0, 86.4]]
}]

Paweł Fus Paweł Fus · Accepted Answer · 2018-06-28T10:49:20

Simply use bubble series where x-value=z-value: https://jsfiddle.net/BlackLabel/wrgk5c7a/

Snippet:

Highcharts.chart('container', {
  chart: {
    type: 'bubble', // bubble series
    zoomType: 'xy'
  },
  title: {
    text: 'Height Versus Weight of 507 Individuals by Gender'
  },
  subtitle: {
    text: 'Source: Heinz  2003'
  },
  xAxis: {
    title: {
      enabled: true,
      text: 'Height (cm)'
    },
    startOnTick: true,
    endOnTick: true,
    showLastLabel: true
  },
  yAxis: {
    title: {
      text: 'Weight (kg)'
    }
  },
  legend: {
    layout: 'vertical',
    align: 'left',
    verticalAlign: 'top',
    x: 100,
    y: 70,
    floating: true,
    backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF',
    borderWidth: 1
  },
  plotOptions: {
    scatter: {
      marker: {
        symbol: 'cricle',
        radius: 5,
        states: {
          hover: {
            enabled: true,
            lineColor: 'rgb(100,100,100)'
          }
        }
      },
      states: {
        hover: {
          marker: {
            enabled: false
          }
        }
      },
      tooltip: {
        headerFormat: '<b>{series.name}</b><br>',
        pointFormat: '{point.x} cm, {point.y} kg'
      }
    }
  },
  series: [{
    name: 'Female',
    color: 'rgba(223, 83, 83, .5)',
    data: [
      [161.2, 51.6],
      [167.5, 59.0],
      [159.5, 49.2],
      [157.0, 63.0],
      [155.8, 53.6],
      [170.0, 59.0],
      [159.1, 47.6]
    ].map(function(p) {
      return [p[0], p[1], p[0]]; // x=z
    })

  }, {
    name: 'Male',
    color: 'rgba(119, 152, 191, .5)',
    data: [
      [174.0, 65.6],
      [175.3, 71.8],
      [193.5, 80.7],
      [186.5, 72.6],
      [187.2, 78.8],
      [181.5, 74.8],
      [184.0, 86.4]
    ].map(function(p) {
      return [p[0], p[1], p[0]]; // x=z
    })
  }]
});

Don't forget to include highcharts-more:

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>

Highcharts : How to increase marker radius based on the value range in Y axis in Scatter Graph?

1 Answers