Remove blank space in chart.js chart

Question

I have a standard horizontally stacked graph but it seem to have a big gap between the graph and the legend (represented by the big red circle bellow)

I have looked upon many configuration options but I can't find where does it come from

$(function(){
myBarChart = new Chart($("#myChart"), {
        type: 'horizontalBar',
        data: {
            labels: ["Actions"],
            datasets: [{
                label: 'Closed : 50 (65%)',
                data: [50],
                backgroundColor: [
                    'rgba(255, 0, 0, 0.5)'
                ],
                borderColor: [
                    'rgba(255, 0, 0, 1)'
                ],
                borderWidth: 1
            }, {
                label: 'Delayed : 20 (12%)',
                data: [20],
                backgroundColor: [
                    'rgba(0, 0, 255, 0.5)'
                ],
                borderColor: [
                    'rgba(0, 0, 255, 1)'
                ],
                borderWidth: 1
            },
            {
                label: 'Open : 12 (5%)',
                data: [12],
                backgroundColor: [
                    'rgba(0, 255, 0, 0.5)'
                ],
                borderColor: [
                    'rgba(0, 255, 0, 1)'
                ],
                borderWidth: 1
            }
            ]
        },
        options: {

            //tooltips: { enabled: false },
            maintainAspectRatio: false,
            responsive: true,
            legend: {
                position: "right"
            },
            scales: {

                xAxes: [{
                    max: 82,

                    display: false,
                    gridLines: {
                        display: false
                    },
                    stacked: true
                }],
                yAxes: [{
                    max: 82,
                    display: false,
                    gridLines: {
                        display: false,
                    },
                    stacked: true,
                    ticks: {
                        beginAtZero: true
                    }
                }]
            }
        }
    });
    });

Edit : Woopsie, I had forgot to add the fiddle I made :

http://jsfiddle.net/uLUAT/1165/

Answer 1

Use

xAxes: [{
    ticks: { max: 82 },
    ...
}]

instead of

xAxes: [{
    max: 82,
    ...
}]

$(function(){
    myBarChart = new Chart($("#myChart"), {
            type: 'horizontalBar',
            data: {
                labels: ["Actions"],
                datasets: [{
                    label: 'Closed : 50 (65%)',
                    data: [50],
                    backgroundColor: [
                        'rgba(255, 0, 0, 0.5)'
                    ],
                    borderColor: [
                        'rgba(255, 0, 0, 1)'
                    ],
                    borderWidth: 1
                }, {
                    label: 'Delayed : 20 (12%)',
                    data: [20],
                    backgroundColor: [
                        'rgba(0, 0, 255, 0.5)'
                    ],
                    borderColor: [
                        'rgba(0, 0, 255, 1)'
                    ],
                    borderWidth: 1
                },
                {
                    label: 'Open : 12 (5%)',
                    data: [12],
                    backgroundColor: [
                        'rgba(0, 255, 0, 0.5)'
                    ],
                    borderColor: [
                        'rgba(0, 255, 0, 1)'
                    ],
                    borderWidth: 1
                }
                ]
            },
            options: {

                //tooltips: { enabled: false },
                maintainAspectRatio: false,
                responsive: true,
                legend: {
                    position: "right"
                },
                scales: {

                    xAxes: [{
                        ticks: { max: 82 },

                        display: false,
                        gridLines: {
                            display: false
                        },
                        stacked: true
                    }],
                    yAxes: [{
                        max: 82,
                        display: false,
                        gridLines: {
                            display: false,
                        },
                        stacked: true,
                        ticks: {
                            beginAtZero: true
                        }
                    }]
                }
            }
        });
        });

<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.bundle.min.js"></script>
<div style="border:1px solid black">
<canvas id="myChart" height="100"></canvas>
</div>

Answer 2

http://jsfiddle.net/uLUAT/1166/ I tried different things but I cant fix it. Can you change your data? If your datas total equal 100 there is no problem I think

 data: {
  labels: ["Actions"],
  datasets: [{
    label: 'Closed : 50 (65%)',
    data: [50],
    backgroundColor: [
      'rgba(255, 0, 0, 0.5)'
    ],
    borderColor: [
      'rgba(255, 0, 0, 1)'
    ],
    borderWidth: 1
  }, {
    label: 'Delayed : 20 (12%)',
    data: [20],
    backgroundColor: [
      'rgba(0, 0, 255, 0.5)'
    ],
    borderColor: [
      'rgba(0, 0, 255, 1)'
    ],
    borderWidth: 1
  }, {
    label: 'Open : 12 (5%)',
    data: [30],
    backgroundColor: [
      'rgba(0, 255, 0, 0.5)'
    ],
    borderColor: [
      'rgba(0, 255, 0, 1)'
    ],
    borderWidth: 1
  }]
},

http://jsfiddle.net/uLUAT/1167/ I created a function check out. You dont need to change values any more.

  var total = 0;
  var value = 0;
  for (var i = 0; i < myBarChart.data.datasets.length; i++) {
    total += myBarChart.data.datasets[i].data[0]
  }
  value = (100 - total) / myBarChart.data.datasets.length
  for (var i = 0; i < myBarChart.data.datasets.length; i++) {
    myBarChart.data.datasets[i].data[0] += value;
  }
  myBarChart.update();