How to dynamically alter Highcharts radius option for a specific user?

Question

I am creating an scattered highchart. Each scatter point in this highchart represents a user, now what I want to do is the size(radius)of the loggedin user should be more than that of other users. So all the scatter points will be of one size and the scatter point of logged in user will be of another size. I want to alter the radius of only that scatter point that represents the loggedin user to 7.5.

First I will have to find out which one is my loggedin user and then I will have to change the radius of that scatter point, I beleive inside an If condition we cannot change the radius.

P.S. All my data is coming from a single series.

    plotOptions: {
                                scatter: {
                                    marker: {
                                        radius: 3.5,
                                        states: {
                                            hover: {
                                                enabled: true,
                                                lineColor: 
                                                'rgb(100,100,100)'
                                            }
                                        }


One of the things that I tried is:
point: {
      events: {
            load:  function(){
                if (this.tempName == currObj.loggedInUser) {                                                     
                    this.series.update({marker:{radius:7.5}});
                }
            }
    }                                            
  }

But this gives an error : ERROR TypeError: Cannot set property 'radius' of undefined

my series data is coming from database. Is it possible to do this? All my data is coming from a single series.

data: [{name: "", x: 27748468.3, y: 108.76, noOfParts: "19"},…]
0
:
{name: "", x: 27748468.3, y: 108.76, noOfParts: "19"}
1
:
{name: "", x: 9562580, y: 123.82, noOfParts: "7"}
2
:
{name: "", x: 5299808.8, y: 88.92, noOfParts: "3"}
3
:
{name: "", x: 5461182.2, y: 120.93, noOfParts: "9"}
4
:
:
{name: "", x: 125913281.3, y: 112.61, noOfParts: "29"}
5
:
{name: "", x: 116723983.3, y: 110.4, noOfParts: "36"}
6
:
{name: "", x: 48781718.3, y: 116.97, noOfParts: "15"}
7
:
{name: "", x: 15208335, y: 106.24, noOfParts: "7"}
8
:
{name: "", x: 78205149.3, y: 115.51, noOfParts: "47"}

Possible duplicate of [Different marker sizes in highcharts?](https://stackoverflow.com/questions/41870308/different-marker-sizes-in-highcharts) — Deep 3015, Mar 29 '18 at 07:30
if requirement is like this you not you make two series in javascript and then pass to the highcharts — Deep 3015, Mar 29 '18 at 12:30
so it is not possible to do it in a single series? Making two different series will require a lot of effort as same chart is being used dynamically in multiple places and I am already running short of time. — Varun Pandey, Mar 30 '18 at 05:28
can you add sample of the series which you get from server side. If it is possible then processing will increase — Deep 3015, Mar 30 '18 at 06:09
sample series added. I was also thinking will it be possible if I send marker size for each user from backend? — Varun Pandey, Mar 30 '18 at 07:49

score 0 · Accepted Answer · answered Apr 03 '18 at 08:09

marker.radius can be assigned to individual points too (in your example you're setting it only on series).

Iterate your points before passing them to Highcharts and set marker.radius for the desired point:

  series: [{
    data: [{
      x: 5,
      y: 6,
      marker: {
        radius: 10
      }
    },
      (...)
    ]
  }]

Live demo: http://jsfiddle.net/BlackLabel/h09s9pm3/

API reference: https://api.highcharts.com/highcharts/series.scatter.data.marker.radius

How to dynamically alter Highcharts radius option for a specific user?

1 Answers1