Highcharts - show every other x-axis category

Question

I have Highcharts set up to display a graph with a bunch of xAxis categories. This is all working fine, but I would like to be able to skip some of the xAxis categories, so not everything one is shown. You can see an example of this working within Campaign Monitor's reporting section (screenshot: http://screencast.com/t/Y2FjNzQ4Y).

Any idea how I can achieve this same layout?

Solution 1

You can set the xAxis type as 'datetime' then set the pointInterval and PointStart in the plotoptions.

Code example:

var chart;
$(document).ready(function () {
    chart = new Highcharts.Chart({
        "xAxis": {
            "type": "datetime"

        "plotOptions": {
            "line": {
                "pointInterval": 86400000,
                "pointStart": 1282408923000
            }
        },
    });
});

The figures you see for pointInterval and Start are in millisecionds which you can generate using getTime() The interval in your case would be 86400000ms which is one day. The library displays appropriate intervals based on your data interval.

Solution 2

It seems like the xAxis:labels:step value is what should be used to accomplish this:

        xAxis: {
            categories: ['JAN', 'FEB', 'MAR', 'APR', 'MAY'],
            labels:{
                step: 2 // this will show every second label
            }
        },

Step Axis Labels

Super late, but I figure this can help someone out.

Solution 3

    xAxis: {
        categories: categoriesname,
        labels: {
            style: {
                color: '#000',
                font: '9px Trebuchet MS, Verdana, sans-serif'
            }
        },
        **tickInterval: TickInterval,**// SET THIS
        tickPixelInterval: 80,
        tickmarkPlacement: 'on'
    },

Comments

[Mike Fielden]

How do these pointInterval and pointStart differ from those within the "Series" option?

[Gazler]

To be absolutely honest, I haven't looked at highcharts for a few months, but if I remember right, it is due to the datetime format, and it works out the intervals for you, as opposed to using a series. Hope that helps.

[M. Zavarello]

This specific solution just worked like a charm for a chart where I was starting a datetime xAxis on an odd year (in this case, 1/1/1997). Trying to adjust the tickInterval to show every other year ended up starting the axis on 1996, which had no data in my chart. Thank you for this!