CODEWITHSUNDEEP
highcharts
Farhad-Taran
Farhad-Taran

Reputation: 6512

highcharts- stacked bar, how can I make the chart cover the width 100%?

I have created a chart in jsfiddle which represents two values. id like the stacked bar chart to be adjusted so that it takes the whole width of the div. it should cover the background, like so.

http://jsfiddle.net/ftaran/jBHDM/4/

enter image description here

$(function () {
    $('#container').highcharts({
        chart: {
            type: 'bar',
            background:'yellow'
        },
        credits: {
            enabled: false
        },
        title: {
            text: null
        },
        xAxis: {
            labels: {
                enabled: false
            }

        },
        yAxis: {
            title: null,
            labels: {
                enabled: false
            },
            labels: {
                enabled: false
            }
        },
        tooltip: {
            formatter: function () {
                return '<b>' + this.series.name + ':</b> ' + this.y + '<br/>' + this.percentage.toFixed(2) + '%';
            }
        },
        legend: {
            enabled: false
        },
        plotOptions: {
            series: {
                stacking: 'normal'
            }
        },
        series: [{
            name: 'Fail',
            color: 'red',
            data: [5]
        }, {
            name: 'Success',
            color: 'green',
            data: [2]
        }]
    });
});

Upvotes: 2

Views: 868

Answers (2)

Davi Mello
Davi Mello

Reputation: 679

Just complementing @wergeld's answer. If you still haven't gotten the result expected after applying his suggestion:

yAxis: {
  max: totalOfSeriesData
}

Per example:

  series: [
      {
        name: 'John',
        data: [5],
        color: 'red',
      },
      {
        name: 'Jane',
        data: [2],
      },
      {
        name: 'Joe',
        data: [3],
      },
    ],

yAxis: {
  max: 10, // 5 + 2 + 3 = 10
  endOnTick: false,
}

Upvotes: 1

wergeld
wergeld

Reputation: 14462

Try using this yAxis parameter:

yAxis: {
     ...
     endOnTick: false,
     ...
},

Upvotes: 3

Related Questions