CODEWITHSUNDEEP
javascriptjqueryhighcharts
sweet potato
sweet potato

Reputation: 135

How to remove axis labels without data points in Highcharts?

I am using the x-axis minRange to have my data points always start from the left on the x-axis. My data sets can have a maximum of 9 points. Whenever my sets only have a single data point or a few, these will end up centered in the graph, if I don't set minRange to a proper value. My x-axis is set to categories: [] to use my time values as strings and not date values. The problem is that when I have only eg two data points and minRange = 9, I will have seven axis labels numbered 2-9 with no data points. How can I remove these labels?

Fiddle

var json = [{"price":"15","time":"12:00"},{"price":"20","time":"12:30"}];
var processed_json = new Array();
$.map(json, function (obj, i) {
    processed_json.push({name: obj.time,y: parseInt(obj.price) });
});

$('#container').highcharts({
        xAxis: {
            categories: [],
            minRange: 9,
            min: 0
        },
        yAxis: {
            minRange: 30
        },
        series: [{
            data: processed_json
        }]
    });

Upvotes: 0

Views: 1331

Answers (2)

jlbriggs
jlbriggs

Reputation: 17791

I would use tickPositions for this. You can build the tickPositions array in the same loop that you are using to build your data by simply adding:

tickPositions.push(i);

Example:

Upvotes: 2

Matjaž Drolc
Matjaž Drolc

Reputation: 386

Another way to do it is to manually supply the list of categories to highcharts library. The idea is to have categories corresponding to your data-points named after obj.time and remaining categories being just empty strings.

var categoryCount = 10;
var json = [{"price":"15","time":"12:00"},{"price":"20","time":"12:30"}];
var processed_json = new Array();
var categories = new Array(categoryCount);
categories.fill("", 0, categoryCount); //Fill list of categories with empty strings

$.map(json, function (obj, i) {
    processed_json.push({name: obj.time,y: parseInt(obj.price) });
    categories[i] = obj.time; //Set the time for particular category
});

$('#container').highcharts({
            xAxis: {
                categories: categories,
                minRange: categoryCount - 1,
                min: 0
            },
            yAxis: {
                minRange: 30
            },
            plotOptions: {

            },
            series: [{
                data: processed_json
            }]
        });

Variable categories should be something like ["12:00", "12:30", "", "", "", "", "", "", ""] in this particular case.

Upvotes: 1

Related Questions