Chartjs-Creating a stacked budget Vs Actual chart

by

1👍

✅

You must add stacked: true to xAxes:

"options": {
    "scales": {
      "xAxes": [{
        "stacked": true,
      }],
      "yAxes": [{
        "ticks": {
          "beginAtZero": true
        }
      }]
    }
  }

Demo:

new Chart(document.getElementById("chartjs-7"), {
  "type": "bar",
  "data": {
    "labels": ["Petrol", "Food", "Kids Clubs", "Alcohol"],
    "datasets": [{
      "label": "Actual Spend",
      "data": [70, 100, 20, 29],
      "borderColor": "rgb(63, 191, 63)",
      "backgroundColor": "rgba(63, 191, 63)"
    }, {
      "label": "Budgeted amount",
      "data": [60, 150, 20, 30],
      "type": "bar",
      "fill": false,
      "borderColor": "rgb(63, 65, 191)",
      "backgroundColor": "rgba(63, 65, 191)"
    }]
  },
  "options": {
    "scales": {
      "xAxes": [{
        "stacked": true,
      }],
      "yAxes": [{
        //"stacked": true,
        "ticks": {
          "beginAtZero": true
        }
      }]
    }
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.3.0/Chart.min.js"></script>

<body>
  <canvas id="chartjs-7" class="chartjs" width="770" height="385" style="display: block; width: 770px; height: 385px;"></canvas>
</body>

Leave a comment