Is there a way to scale the custom marker of a high charts scatter chart?

Question

We are using some custom markers for the high charts scatter chart.

The marker.radius property is used to increase the size of point markers.

However when using custom images the radius setting does not increase the size of the custom marker.

Is this possible in high charts or will we need to create images for every possible marker size ?

Here is the code I tried :

$(function () {
    $('#container').highcharts({
        chart: {
        },
        xAxis: {
            categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
        },

        series: [{
            data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 316.4, 294.1, 195.6, 154.4],
            marker: {
                symbol: 'triangle', 
                radius: 15

            }
        }, {
            data: [216.4, 194.1, 95.6, 54.4, 29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5],
            marker: {
                symbol: 'url(http://highcharts.com/demo/gfx/sun.png)', 
                radius: 50
            }
        }]
    });
});

The triangle increase as expected, the sun does not.

Here is a link to a JsFiddle where you can try it yourself:

example

As per my understanding not possible through properties, however you can directly modify the DOM's IMAGE tag width, height, x & y attributes. — msapkal

Sebastian Bochan Sebastian Bochan · Accepted Answer · 2013-04-05T09:36:09

You can modify width/height parameters in SVG element, like in the example below:

http://jsfiddle.net/CedjX/

  setTimeout(function(){
                chart.series[1].data[0].graphic.attr({
                    width: 50,
                    height: 50
                });
            }, 1)

Is there a way to scale the custom marker of a high charts scatter chart?

2 Answers