0
273
ViewsAPI 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
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:
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.
@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.
2 answers
Answer question0
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/
0
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)';