I am having some difficulties using the pulsating marker you can see on this example, but on a wind rose in highchart.

When trying to recreate it, it looks like the animation only shows on the left side of the container?

Here's my fiddle to illustrate my problem.

        series.pulse
        .attr({
            x: series.xAxis.toPixels(point.x, true),
            y: series.yAxis.toPixels(point.y, true),
            r: series.options.marker.radius,
            opacity: 1,
            fill: series.color
        })
        .animate({
            r: 20,
            opacity: 0
        }, {
            duration: 1000
        });

I am having some difficulties using the pulsating marker you can see on this example, but on a wind rose in highchart.

When trying to recreate it, it looks like the animation only shows on the left side of the container?

Here's my fiddle to illustrate my problem.

        series.pulse
        .attr({
            x: series.xAxis.toPixels(point.x, true),
            y: series.yAxis.toPixels(point.y, true),
            r: series.options.marker.radius,
            opacity: 1,
            fill: series.color
        })
        .animate({
            r: 20,
            opacity: 0
        }, {
            duration: 1000
        });

• highcharts

1 Answer 1

You need to convert cartesian coordinates to the polar ones in your plugin, something along these lines:

    ...
    const point = e.point,
        series = e.target,
        chart = series.chart,
        renderer = chart.renderer,
        angle = point.x,
        radius = point.y;

    const centerX = chart.plotWidth / 2 + chart.plotLeft;
    const centerY = chart.plotHeight / 2 + chart.plotTop;
    const radians = deg2rad(angle); //you can easily define such helper
    const x = centerX + radius * Math.cos(radians);
    const y = centerY + radius * Math.sin(radians);

That change should help to position the pulsating point within the plot area, then, you need to find a way to connect the pulse with the new points.

Happy charting!