How to draw HighChart XAxis dynamically

highcharts, jquery

Solution

You are looking for the `Axis.update()` method.

Highcharts.charts[0].xAxis[0].update({categories:['some','new','categories']}, true);

Here's an example.

Problem

I am drawing a highchart as- ``` options.series.push({ name: this.SubCity, data: this.Data }); ``` where data is an array for series data. I also have an array for xAxis Categeries as- ``` Categ['Jan-Mar', 'Apr-Jun', 'Jul-Sep', 'Oct-Dec'] ``` my chart is drawing correctly but problem with the xAxis categories is I don't know how to set categories dynamically . for more clarity i am adding some code- ``` var PriceTrend = JSON.parse(Data); var AvgRate = new Array(); var Categories = new Array(); $(PriceTrend).each(function (index) { MaxRate.push(this.Max); MinRate.push(this.Min); AvgRate.push((this.Max + this.Min) / 2); Categories.push(this.Quarter); }); TrendData.push({ SeriesID: SeriesID, Data: AvgRate, Visible: true, SubCity: SubCity, Categ: Categories }); DisplayTrend(); function DisplayTrend() { options.series = []; $(TrendData).each(function (Index) { if (this.Visible) { options.series.push({ name: this.SubCity, data: this.Data }); } }); chart = new Highcharts.Chart(options); ``` }

Original source