Highcharts high charts - how do I get a stacked graph to the full width?

Highcharts high charts - how do I get a stacked graph to the full width?,highcharts,Highcharts,I have created a high chart but would like to have a similar voting style to youtube; with positive vs negative. My issue is getting the bar to stay the full width of the graph, I know percentages can fix this but I want whole numbers. http://jsfiddle.net/u6H3b/ $(function () { $('#container').highcharts({ chart: { type: 'bar', marginLeft:0 }, title: { text: 'votes' },

I have created a high chart but would like to have a similar voting style to youtube; with positive vs negative. My issue is getting the bar to stay the full width of the graph, I know percentages can fix this but I want whole numbers.

http://jsfiddle.net/u6H3b/

$(function () {
        $('#container').highcharts({
            chart: {
                type: 'bar',
              marginLeft:0             

            },
            title: {
                  text: 'votes'
                  },
              credits: {
            enabled: false
        },


            xAxis: {
                categories: ['Apples'],
                title: {

                    enabled: false 



                }
            },
                         exporting: {
            enabled: false
        },
            yAxis: {
                min: 0,
                max:23,
                title: {
                      enabled: false },
               gridLineColor: '#fff',
               lineColor: '#fff'
            },
            legend: {
                backgroundColor: '#FFFFFF',
                reversed: true
            },
            plotOptions: {
                series: {
                    stacking: 'normal'
                }
            },
                series: [{
                name: 'Yes',
                data: [20]
            },{
                name: 'No',
                data: [3]
            }]
        });
    });

#1

One option is to use 'endOnTick':

yAxis: {
            endOnTick: false,

http://jsfiddle.net/f3eFd/

If you want the end tick (23) to show, you could also add:

tickInterval:23,

http://jsfiddle.net/bLDpg/

If you really want to get fancy, you can define each tick you need. In the following code, it prints ticks at 0, 3 and at 23.

 tickPositioner: function () {
            var positions = [0, 3, 23];
            return positions;
        },

http://jsfiddle.net/aSHz3/


#2

I think, all you need to set is endOnTick: false and maxPadding: 0, see: http://jsfiddle.net/u6H3b/1/

The only problem is that last tick is not displayed, if this is issue for you, use tickPositioner as suggested by SteveP.