Highcharts legend symbol sizes for scatter charts

Question

I have a problem of rendering legends for 3d scatter charts with different symbol sizes - see http://jsfiddle.net/YyV6x/4/

The legend takes the same sizes of symbols as in the main chart and the positioning of legend items is completely off. I tried forcing the legend symbols to be the same size:

$(chart.series).each(function(){
    this.legendSymbol.attr('width',8);
    this.legendSymbol.attr('height',8);
}); 

Unfortunately, it also shifts symbol X and Y coordinates - see http://jsfiddle.net/HB53K/.

How can I fix this?

Thanks

Answer 1

You can use different solution: set default marker for series, but for each point change radius: http://jsfiddle.net/HB53K/5/

Series example:

    { 
        name: 'Drinking out',
        data: [
            {
                y: 5,
                marker: {
                    radius: 19
                }
            },{
                y: 8,
                marker: {
                    radius: 19
                }
            },{
                y: 6,
                marker: {
                    radius: 19
                }
            }
        ],
        marker: {
            symbol: 'square',
            //radius: 19 //default value
        }
    }

Answer 2

Reported to our developers as enhancement.

https://github.com/highslide-software/highcharts.com/issues/3275

Answer 3

You could do a translate on each chart.series to move them into the correct position before adjusting the width and height. Like this (JSFiddle example):

$(chart.series).each(function(){
    this.legendSymbol.translate((this.legendSymbol.width/2), ((this.legendSymbol.height/2)-4));
    this.legendSymbol.attr('width',8);
    this.legendSymbol.attr('height',8);
});

It does not fix the spacing that is left over between legend items from the original sizes, but at least each item is in position for their legend text.

There may be some more elegant ways to solve this.