Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Highchart specific width stack column bar graph

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!

like image 507
Gäng Tian Avatar asked Jul 05 '11 22:07

Gäng Tian


People also ask

How do I change the width and height of a Highchart?

use chart. setSize(width, height, doAnimation = true); in your actual resize function to set the height and width dynamically.

How do I reduce the gap between bars in Highcharts?

Re: Reducing the space between the bars (column range) You can for example lower the max property value (or change extremes with Axis. setExtremes()) to reduce the visible range and this way you can retain fixed pointWidth and increase space between tick at the same time.


3 Answers

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.

like image 136
Gäng Tian Avatar answered Oct 12 '22 09:10

Gäng Tian


series: [{             name: strSeriesTitle,             data: arrData,             pointWidth: 28         }] 
like image 33
test Avatar answered Oct 12 '22 11:10

test


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]
        }]
    });
});
like image 33
Rahul Gupta Avatar answered Oct 12 '22 11:10

Rahul Gupta