CODEWITHSUNDEEP
highchartspagination
moja
moja

Reputation: 95

Highcharts not changing x-axis label on pagination

I have found this jsfiddle very helpful when I started working on paginated highchart columns. On top of this good example, I would like to know how I could change the x-axis labels into each data's corresponding name. (Ex. Along the x-axis, we should find the names of 'Fred G. Aandahl', 'Watkins Moorman Abbitt', 'Amos Abbott', etc. with their corresponding y-values and must change accordingly when the "Next" button is clicked.)

I have tried adding "xAxis" option inside the highcharts portion but still had no luck.

  pie = new Highcharts.Chart({
        chart: {
            renderTo: 'container',
            type: 'column'
        },
        xAxis: {
            labels: {
                formatter: function(){
                    return this.value;
                }
             }
        },
        series: [{
            data: []
        }]
    });

and

pie = new Highcharts.Chart({
        chart: {
            renderTo: 'container',
            type: 'column'
        },
        xAxis: {
            labels: {
                  format: '{value}'
              }
        },
        series: [{
            data: []
        }]
    });

Can someone help me regarding on what I am missing in this example? It will be very much appreciated.

Upvotes: 1

Views: 884

Answers (2)

moja
moja

Reputation: 95

I am able to change the x-axis labels accordingly by adding 

pie.xAxis[0].update({
    categories: category.slice(from, to)
})

after the setData call, where category is an array of all the x-axis labels that you want to display in correspondence to each y-axis value. Moreover, the 

xAxis: {
        type: 'category'
}

portion, as suggested by @Kacper Madej, works for the specific data format given originally. However, the pie.xAxis[0].update() could be used on a more general sense given that you know the array of x-axis labels that you want to use (regardless of the data or series format that you have).

Here is the link to the jsfiddle.

Hope this could be of any help, too.

Upvotes: 1

Kacper Madej
Kacper Madej

Reputation: 7886

You can set type of xAxis to category and without category array the value in axis will be taken from the point. But you will need to change your setData call to

pie.series[0].setData( data.slice(from, to), true, true, false );

xAxis: {
            type: 'category'
        },

Example: http://jsfiddle.net/kpxp4/8/

Upvotes: 2

Related Questions