Wrong rendering of y-axis in polar charts

Question

I need help with the y-axis of polar charts like spiderweb or windrose. I've an application with an dashboard which contains some widget, each containing an iframe with an Highcharts chart. Because these widgets are reziable, I've some javascript for resizing the container of the charts.

    $(window).bind("resize", resizeChart);
    function resizeChart() {
        var width = $(document).width() - 55;
        var height = $(document).height() - 60;
        $("#container").css("width", width);
        $("#container").css("height", height);
    }

Some example: http://jsfiddle.net/CwnDw/

My problem is, that the scale of the y-axis often look very ugly. When the chart loads the y-axis has only one tick. After resizing the chart to + 10 px, it contains no tick, and after resizing to the inital size, the y-axis renders with 5 ticks. I don't understand why. In my example I only get these effect when I resize the chart from a small size to a bigger size very fast.

Is there a better way for resizing a chart? I tried the chart.setSize() function to, but no effect. Or: is there a way to rerender/recalculate the y-axis?

Thank you Torben

Answer 1

I'm not sure about a redrawing method that would accomplish what you are looking for, but with my experience using Highcharts, I found it is best to specify tick positions to avoid any unexpected results.

Here is a link to Highchart documentation regarding yAxis: tickPosition

http://api.highcharts.com/highcharts#yAxis.tickPositions

There is a pretty good jsFiddle example there that should cover implementation.