How do I get x-axis to expand to take more of the chart width

Question

As you can see from the attached image, my x-axis categories are getting bunched together in the middle. How can I configure highcharts to take up more of the x-axis? Note: The chart size is dynamic, it grows and shrinks based on the overall browser size and split-panels within the app. So explicit computation of the point-width is not an option (I expect highcharts to do the work for me).

Note: The picture is vertically cropped.

enter image description here

The chart options I'm using are:

highchart.setAnimation(false);
Legend legend = new Legend();
legend.setEnabled(false);
highchart.setLegend(legend);

highchart.getXAxis().setCategories(result.getAxisXCategories().toArray(new String[] {}));
highchart.setType(Series.Type.COLUMN);
ColumnPlotOptions options = new ColumnPlotOptions();
options.setStacking(Stacking.NORMAL);
options.setGroupPadding(0);
options.setAnimation(true);
highchart.setColumnPlotOptions(options);

In other words, legend is turned off and column plot options is set to zero group-padding.

UPDATE: Here is a JSFiddle showing the same issue

I've added the options I'm setting. I don't have a js.fiddle - this is a gwt-highchart implementation. — Καrτhικ, Mar 25 '13 at 16:43

score 1 · Accepted Answer · answered Mar 28 '13 at 16:56

For others who run into the same issue, the solution is to set the pointRange option of the ColumnPlotOptions. In JSON this looks like:

"plotOptions": {
        "column": {
            "stacking": "normal",
            pointRange: 1,
                "groupPadding": 0
        }
    }

In GWT-Highcharts, you don't actually have a specific API for pointRange. Therefore set a generic option like this:

ColumnPlotOptions options = new ColumnPlotOptions();
options.setOption("pointRange", 1.0);
...

score 0 · Answer 2 · answered Mar 26 '13 at 13:53

0

You can try to set pointWidth() http://api.highcharts.com/highcharts#plotOptions.column.pointWidth

answered Mar 26 '13 at 13:53

Sebastian Bochan

37,348
3
49
75

I'll have to recompute that for every chart resize! To me this looks like broken logic within highchart. – Καrτhικ Mar 26 '13 at 15:51
It looks like a GWT problem, because in Highcharts it looks like fine. So if it possible could recreate it in jsfiddle.net ? – Sebastian Bochan Mar 27 '13 at 14:40
I've updated the question with a JSFiddle that reproduces the problem. – Καrτhικ Mar 27 '13 at 19:15

How do I get x-axis to expand to take more of the chart width

2 Answers2