Highchart specific width stack column bar graph

Question

Need to find a way to represent a graph with error bar, but it seems that it's not supporting in the highchart at the moment. My plan is to use a stack column bar chart with 0 to lower Y as transparent, and lower Y to upper Y with a red color or whatever I am gonna pick later.

My question is:

Is it possible limit the stack column bar width to say 1px regardless the zoom level in highchart?

Thanks for the input!

score 36 · Accepted Answer · answered Jul 06 '11 at 18:03

36

Just figured out this myself. pointWidth is the parameter to set the width for bar width. Also the walk around is nice for represent the error bar since there aren't any highly interactive javascript chart support this type of chart yet.

answered Jul 06 '11 at 18:03

Gäng Tian

1,588
2
18
26

6

can you share an example please? – ip. Jul 22 '11 at 01:18
Thanks, this helped me! You should accept your answer as being correct. – benekastah Sep 29 '11 at 15:56
2

That is awesome! However, now my bars overlap each other. Did you have this problem? Or do you know how to auto-adjust the spacing between each bar? – JimmyJammed Jan 10 '12 at 21:40
2

**plotOptions.column.groupPadding** also has an effect on the column width. If a chart has many columns or no space to fit, the default 0.2 padding can distort the width. Setting it to 0 solves the problem. – Ferenc Takacs Sep 22 '15 at 14:31
@NitWitStudios Same problem. Found any solution? – Half Blood Prince Aug 19 '16 at 05:10

score 25 · Answer 2 · edited Nov 29 '12 at 20:15

25

series: [{
            name: strSeriesTitle,
            data: arrData,
            pointWidth: 28
        }]

edited Nov 29 '12 at 20:15

Chirantan

15,304
8
49
75

answered Nov 17 '11 at 09:04

test

251
3
2

score 14 · Answer 3 · answered Jul 04 '14 at 06:31

A working DEMO for setting width of column bars irrespective of the chart size.

You will have to use pointWidth option like:

$(function () {
    $('#container').highcharts({
        chart: {
            type: 'column'
        },
        xAxis: {
            categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
        },

        plotOptions: {
            series: {
                pointWidth: 40//width of the column bars irrespective of the chart size
            }
        },

        series: [{
            data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
        }]
    });
});

It is increasing the width of the `bars` but after that the `bars` are overlapping. I want to increase `bars` size respective of chart size. How? — Half Blood Prince, Aug 19 '16 at 05:05

score 10 · Answer 4 · answered Aug 18 '15 at 22:40

10

You should use the following options instead of pointWidth to be responsive and not fixed:

plotOptions: {
    series: {
        pointPadding: 0, // Defaults to 0.1
        groupPadding: 0.01 // Defaults to 0.2
    }
},

answered Aug 18 '15 at 22:40

epool

6,710
7
38
43

Increase `groupPadding ` is very usefull for making a "secondary" minibar close to a bigger "principal" bar. – Ifnot Oct 12 '15 at 09:51
Thank you. I didn't want to use fixed pixels and pointWidth did not take a string percent. However, with pointPadding, groupPadding, and pointWidth, I don't see them documented. http://api.highcharts.com/highcharts/plotOptions.series – Turbo Dec 02 '16 at 00:14

Highchart specific width stack column bar graph

4 Answers4