nazmarina
nazmarina

Reputation: 41

ignoreHiddenSeries is not hiding values on X-axis if displayed series have null data

I"m working on a highchart similar to the following http://jsfiddle.net/7FdQR/1/

$(function () {
var chart;
$(document).ready(function() {
    chart = new Highcharts.Chart({
        chart: {
            renderTo: 'container',
            type: 'column'
        },
        title: {
            text: 'Stacked column chart'
        },
        xAxis: {
            categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas']
        },
        yAxis: {
            min: 0,
            title: {
                text: 'Total fruit consumption'
            },
            stackLabels: {
                enabled: true,
                style: {
                    fontWeight: 'bold',
                    color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
                }
            }
        },
        legend: {
            align: 'right',
            x: -100,
            verticalAlign: 'top',
            y: 20,
            floating: true,
            backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColorSolid) || 'white',
            borderColor: '#CCC',
            borderWidth: 1,
            shadow: false
        },
        tooltip: {
            formatter: function() {
                return '<b>'+ this.x +'</b><br/>'+
                    this.series.name +': '+ this.y +'<br/>'+
                    'Total: '+ this.point.stackTotal;
            }
        },
        plotOptions: {
            column: {
                stacking: 'normal',
                dataLabels: {
                    enabled: true,
                    color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white'
                }
            }
        },
        series: [{
            name: 'John',
            data: [null, 3, 7, 2, null]
        }, {
            name: 'Jane',
            data: [2, 2, 3, 2, 1]
        }, {
            name: 'Joe',
            data: [3, 4, 4, 2, 5]
        }]
    });
});

});

If you look at the data for John you'll see some null values for apples and bananas.

If we disable Jane and Joe series and leave only John's info we will still see all the fruit categories on the x-axis even though there are null values in John's dataset and ignoreHiddenSeries is set to true. What I want to achieve here is for the x-axis to be redrawn to only display Oranges, Pears and Grapes labels instead (no Apples and Banana labels on x-axis). Is there a way to do that in highcharts?

Thanks!

Upvotes: 1

Views: 1959

Answers (1)

nazmarina
nazmarina

Reputation: 41

Found a solution. It might not be the best one but it works http://jsfiddle.net/Hm8T9/

I created a small script and used setExtremes() function to manually set mins and maxs for xAxis.

Also if you ever deal with < 5 categories and do not want to show all of them (like in my example), set minRange for xAxis to 1 or whatever number you need.

xAxis: 
{
    minRange: 1
}

Upvotes: 1

Related Questions