Jack Daniels
Jack Daniels

Reputation: 81

HighCharts - increase bar height and reduce bar gap

Trying to increase bar height to accommodate series name inside bar and trying to reduce default gap between series group. The section "series: []" is, I assume for the JSON return function to populate. Tried many examples from all the generous JSFiddle examples to no avail. I'm a noob so please be patient. Any ideas? So far I have: http://jsfiddle.net/PeterHanekom/7ue5bkm8/1/

        var options = {
            chart: {
                renderTo: 'container',
                type: 'bar'
            },
            colors: ['#00B9B9', '#527CED', '#A7D36B', '#B9B900', '#0097FF', '#400040', '#EA4D00', '#336699', '#8080C0', '#ADA870'],
            title: {
                text: 'Cluster Totals',
                x: -20 //center
            },
            subtitle: {
                text: 'Dept - Branch',
                x: -20
            },
            xAxis: {
                categories: []

            },
            yAxis: {
                min: 0,
                max: 100,                   
                title: {
                    text: 'Percentage'
                },
                labels: {
                    overflow: 'justify'
                }
            },
            tooltip: {
                formatter: function() {
                        return '<b>'+ this.series.name +'</b><br/>'+
                        this.x +': '+ this.y;
                }
            },
            legend: {
                align: 'center',
                borderWidth: 0
            }, 
            plotOptions: {
                bar: {              
                stacking: 'normal',
                pointWidth: 20,
                pointPadding: 0,
                cursor: 'pointer',
                point: {
                    events: {
                        click: function() {
                            alert('later drilldown events');
                        }
                    }
              dataLabels: {
                  enabled: true,
                  inside:true,
                  useHTML: true,
                  align: 'left',
                  color: 'white',
                  style: {
                      fontWeight: 'bold'
                  },                      
                  verticalAlign: 'middle',                      
                  formatter: function () {
                      if (this.series.name) 
                        return '<span style="color:black; height: 25px;">' + this.series.name + ' = ' + this.y + '</span>';
                      else return '';
                  }
                }
                }
            },
            series: []
        }

      $.getJSON("./services/get360Pivot.php?s_Search=" + sOperatorSearch, function(json) 
      {
        options.xAxis.categories = json[0]['data'];
        options.series[0] = json[1];
        options.series[1] = json[2];
        options.series[2] = json[3];
        options.series[3] = json[4];
        chart = new Highcharts.Chart(options);
      });          

Upvotes: 8

Views: 13695

Answers (1)

SteveP
SteveP

Reputation: 19093

I think you options you need are groupPadding and pointWidth. e.g.

              groupPadding:0.1,
              pointWidth:20,

http://jsfiddle.net/s3t2pL94/

Upvotes: 7

Related Questions