highcharts grouped chart using custom bar width with no pointPadding

Question

Basically i want to use pointPadding with custom bar width (pointWidth) both at the same time. But i can't, here is my problem:

I want a chart with no-padding in the bars of one group when showing grouped chart. For this purpose i used pointPadding: "0" and it shows me exactly right chart. like:

 if(chart_json.chart.defaultSeriesType=='column'){
          if(chart_json.xAxis.categories.length >= 1 ){

        chart_json.plotOptions.column.groupPadding = "0.05";
          chart_json.plotOptions.column.pointPadding = "0.00";

          }  
      }

      var chart=new Highcharts.Chart(chart_json,startupObj.startupFunction);
      chartObjArray.push(chart);

But when i set my custom width it adds some spaces in between bars of one group.

Actually i want to put max and min limit on bar width, but i can't find any support from Highchart library. So for this purpose when highchart generate the chart, if the generated chart bar width exceeds my max-limit i set it to my max-limit and same for lower limit.

 if(chart_json.chart.defaultSeriesType=='column'){
          if(chart_json.xAxis.categories.length >= 1 ){

              chart_json.plotOptions.column.groupPadding = "0.05";
              chart_json.plotOptions.column.pointPadding = "0.00";

          }  
      }

      var chart=new Highcharts.Chart(chart_json,startupObj.startupFunction);
      chartObjArray.push(chart);

    //set bar width
    if(chart_json.chart.defaultSeriesType=='column' || chart_json.chart.defaultSeriesType=='bar'){
        setChartBarMaxMinWidth(chart,chart_json);
    }

setChartContainerWidth(chart_json,chart);

////************************************///////////////////

function setChartBarMaxMinWidth(chart,json){

var maximumBarWidth=70;
var minimumBarWidth=15;

chart_json=eval('('+json.chart_json+')');

for(var j=0;j<chart.series.length;j++){
    var series=chart.series[j];
    if (series.data[0].pointWidth  >  maximumBarWidth) {
        chart.series[j].options.pointWidth = maximumBarWidth;
        isMaxMin='MAX';
    }

    if (series.data[0].pointWidth  <  minimumBarWidth) {
        chart.series[j].options.pointWidth = minimumBarWidth;
        isMaxMin='MIN';
    }

};

function setChartContainerWidth(chartOptions,chart){  
          // calculate # of bars
          var numberOfBars=seriesGroupLength*categoriesLength;
          // calculate container width
          // var containerWidth=numberOfBars*43;

          // get chart bar width


          var containerWidth=numberOfBars*barWidth;


          chart.setSize($(container).width(),$(container).height());

};

In setChartContainerWidth() i used highchart setSize() method to resize chart..

Thanks if someone can help me to remove spaces in between bars of one group.

Thanks

Could you make a JSFiddle.net with your chart? That helps us to easily "fiddle" with your code to try to get it working. — MatthewKremer

david david · Accepted Answer · 2013-10-30T16:31:12

I used the spacingTop attribute to enforce a maximum pointWidth:

if (series[0].data[0].pointWidth > maximumBarWidth) {
     this.options.chart.spacingTop = this.options.chart.height - (maximumBarWidth * series.length) - 30;
     this.isDirtyBox = true;
     this.redraw();
}

So if there is one Bar over a certain Width the spacing will be adjusted and the chart is drawn smaller.

This does not change the size of the container but keeps the bars beneath a certain size and your pointPadding and groupPadding will not be affected.

You will have to adjust the calculation of the spacingTop depending on your data structure and the size of your axis titles.

highcharts grouped chart using custom bar width with no pointPadding

1 Answers