Search code examples
javascripthighchartssymbolsrenderer

How to provide additional arguments to custom symbol renderer in Highcharts?


I would like to generate a Highcharts scatter chart with oval markers with variable height and width. To create the oval, I'm using a custom marker, and generating the necessary curves in the renderer. However, the required width and height of each oval is different. Ideally, I'd like to specify something akin to

data:[{x:0, y:0, marker:{radius:{w:3,h:7}} }]

and then use that information when creating the oval in the renderer.

However, Highcharts doesn't like the object as the radius value. Is there a way to pass arbitrary data to the renderer? I'm currently using a hack in which I pass the renderer an index into an external array via the marker radius, but I'm hoping there's a sanctioned way since this is creating some undesirable side effects.

Current JSFiddle here

Appreciate any thoughts!


Solution

  • You need to wrap drawPoints function, which uses

    point.graphic = graphic = chart.renderer.symbol(
                            symbol,
                            plotX - radius,
                            plotY - radius,
                            2 * radius,
                            2 * radius
                        )
                        .attr(pointAttr)
                        .add(markerGroup);
    

    but should your custom paramter lik rx/ry in marker, not default r / radius.