<div class="box">
    <div class="box-header with-border">
        <h4 class="box-title" style="cursor:pointer;"><a aria-expanded="true">Estadisticas</a></h4>
    </div>
    <div class="box-body">
          <canvas id="GraficoEstadisticas" height="auto"></canvas>
    </div>
</div>

<script type="text/javascript">
    var ctx = document.getElementById("GraficoEstadisticas").getContext('2d');
    var myChart = new Chart(ctx, {
        type: 'horizontalBar',
        data: {
            labels: ["Presupuestado", "Gastado", "Restante"],
            datasets: [{
                data: [{{ Plan.Total.TOTAL}},{{ Plan.TotalGastado.totalGASTADO }}, {{ Plan.Total.TOTAL -  Plan.TotalGastado.totalGASTADO }}],
                label: ["Dinero Presupuestado"],
                backgroundColor: [
                    'rgba(0, 192, 239, 0.2)',
                    'rgba(0, 166, 90, 0.2)',
                    'rgba(255, 99, 132, 0.2)'
                ],
                borderColor: [
                    'rgba(0, 205, 255, 1)',
                    'rgba(0, 127, 69, 1)',
                    'rgba(255,99,132,1)'
                ],
                borderWidth: 2
            }]
        },
        options: {
            scales: {
                yAxes: [{
                    ticks: {
                        beginAtZero:true
                    }
                }]
            }
        }
    });
</script>