'API values to set opacity levels to show overlapping points in highcharts scatter?

Looking at the demo for scatter charts I can see what when two points overlap they become more opaque: https://www.highcharts.com/demo/scatter

nice visual indicator of overlap/density

I'm pulling data in from fields on a Drupal site, which is then building the JSON to feed to Highcharts via a contributed module which overrides the alpha transparency values and just outputs opaque / opacity = 1 <path> elements. I was able to feed the opacity back to the chart via passing in the proper API option ala $chart['series'][0]['opacity'] = .6; however the overlapping areas of points don't turn into something like .8 like I would expect:

no fancy opacity

I haven't been able to find the API call to manage this, is there some way I can pass a value via plotOptions.scatter.overlap or whatever to get this behaviour back?

update: there's transparency between series, but not on the markers between them - which makes sense as I'm applying opacity at the series level and there isn't an option for it at the marker level as far as I can tell.

opacity overlap between series but not within them

@Sebastian Hajdus's answer doesn't solve the issue, as the default for lineColor is actually #fff (white), and fillColor being null just inherits the color from series.



Solution 1:[1]

series.scatter.color ended up being the value I needed to change marker opacity on scatter charts using the API.

Sadly there's no fillOpacity for scatter charts ala series.bubble.marker.fillOpacity which would have made my life easier.

Passing the following lines worked for me:

$chart['series'][0]['color'] = 'rgba(83, 223, 83, .5)';
$chart['series'][1]['color'] = 'rgba(223, 83, 83, .5)';
$chart['series'][2]['color'] = 'rgba(83, 83, 223, .5)';

Solution 2:[2]

Fill propertyies lineColor and fillColor in the null to enable the default settings.

  plotOptions: {
    scatter: {
      opacity: 0.5,
      marker: {
        radius: 20,
        lineWidth: 2,
        lineColor: null,
        fillColor: null,
      }
    }
  },

Live demo: https://jsfiddle.net/BlackLabel/tbpn63uc/1/

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 erutan
Solution 2 Sebastian Hajdus