Highcharts error 19 issue when adjusting container width that chart displays in

Question

My issue is the following. I generate a highcharts chart into a divs on a page. Sometimes the chart contains too many data points which then produces the Highcharts error 19 error. I catch this and display some friendly text to the user saying that they can change the layout of the page and width of the div it is in by clicking some links i have made.

The user can change the width of the div by clicking the link which then causes the chart to redraw. It then has enough space to render. All good :D

Now.... The user then clicks a link to make the area for the chart smaller again. How do i then catch the 19 error that is produced and change the content of the div back to my friendly error message?

NOTES: I have multiple charts on the page. Destroying all of them to redraw is not an option as the data is retrieved for each via ajax. I am happy to destroy the one that produces the error but how do i get it?

Here is a JS fiddle: http://jsfiddle.net/67so1sdb/4/

To reproduce my issue. Open firebug. Click the "Big" link. The chart redraws. Then click the "Small" link. Notice the error.

Here is some of the code in question

HTML (chart container and layout change links)

<a href="#" class="layout" data-size="big">Big</a>
<a href="#" class="layout" data-size="small">Small</a>

<div id="container" class="small"></div>

JQUERY

var dp = [*lots of data*];

var options = {
            series: [{
                data: dp
            }],
            boxtitle: "Test",
            chart: {
                renderTo: "container",
                margin: [10, 30, 20, 35],
                height: 200,
                type: "column"
            },
            exporting: false,
            legend: false,
            colors: Highcharts.getOptions().colors,
            xAxis: {
                type: "category",
                categories: dp
            },
            yAxis: {
                min: 0,
                lineWidth: 1,
                allowDecimals: false,
                title: false,
                labels: {
                    style: {
                        fontSize: '9px',
                        fontWeight: 'normal'
                    }
                }
            }
        };

$(function(){  
    try {
        var chart = createChart(options);
    }
    catch (e) {
        console.log("CAUGHT ERROR IN HIGHCHARTS", e);
        if (e.toString().indexOf("Highcharts error #19") > -1) {
            $("#container").html("<p>Chart display area not big enough. Please adjust the layout</p>");
        }
    }
});

function createChart(options)
{
    return new Highcharts.Chart(options);   
}


$('body').on("click", '.layout', function (e) {
    e.preventDefault();

    var classname = $(this).attr("data-size");

    $('#container').removeClass("small").removeClass("big");
    $('#container').addClass(classname);

    //this is called so that if the chart does fit in the smaller window the chart resizes to the new div size
    window.dispatchEvent(new Event('resize'));

    //if chart display area was not big enough try again now.
    $('#container p').each(function (i, rec) {
        if ($(this).text().indexOf("Chart display area not big enough") > -1) {
            //remove p and try to now reload chart
            $(this).remove();
            createChart(options);
        }
    });
});

Thanks in advance :D

EDIT: Sorry probably should have mentioned this... tickInterval is not the answer as i am using categories. In the fiddle it is passing numbers in only because it is a scaled down version. Sometimes these will be strings and cannot then be grouped using tickinterval

Answer 1

It is related with fact that you have too many ticks (categories), so you can use tickInterval