keep fixed size of the bars in Highcharts

Question

I want to maintain the same size of the bars. no matter how many there are values. here is the size I want to have all bars.

when added four values the bars become smaller.

I want all the bars are the same size. no matter that I have to scroll to see the other bars (this is what I want).

this is my code: http://jsfiddle.net/Laxfsbtb/

$('#container').highcharts({
        chart: {
            type: 'bar'
        },

         series: [{
          name: 'text1',
          data: [1000, 950,920,880,850,234],
          color: "#FF0000"
      }, {
          name: 'text2',
          data: [800,770,750,740,730,4324],
          color: "#000000"

      }, {
          name: 'text3',
          data: [600,540,535,500,400,324],
          color: "#00FF00"

      }]
    });
});

Answer 1

This can be done with the pointWidth parameter like:

plotOptions: {
  series: {
    pointWidth: 20 //width of the bar/column/point.
  }
},

To allow scrollbar you should probably upgrade to highstock but that only works horizontally. Or you could set up a div that allows the chart to be "larger" on the inside and scroll through that div window.

Answer 2

Not sure precisely what you're looking for, but this might help.

I put together an example a while ago to adjust the height of the chart according to the number of bars, using some preset parameters:

var barCount     = chartData.length; 
var pointWidth   = 20;
var marginTop    = 60;
var marginRight  = 10;
var marginBottom = 50;
var marginLeft   = 100;
var pointPadding = 0.3;

var chartHeight = marginTop 
            + marginBottom 
            + ((pointWidth * barCount) * (1 + groupPadding + pointPadding));

So, tell it what size you want the bars, how much padding between them, how much margin at top and bottom of chart, and how many data points you have.

Bars will stay the same size and spacing while the chart itself grows to accommodate them.

example:

• http://jsfiddle.net/jlbriggs/kpu5d1qf/

To see it work, change the 12 in this line:

var chartData = randomData(12, true);

To whatever number you want.

((Edit

Since you are working with grouped data, you'll have to change the math a little bit.you'll need to account for the number of groups, and multiply hat by the groupPadding, added to the number of points * the pointPadding.

You'll also have to make getting your count of data points slightly more complex.