FoodLoop-Web/src/app/dashboard/more-graphs-and-tables.component.html

<script src="node_modules/chart.js/src/chart.js"></script>
<div class="animated fadeIn">
  <div class="form-group row">
    <div class="card-block">
        <div class="row">
          <div class="col-12">
            <h4 class="card-title mb-0">Weekly Spending by Category</h4>
          </div>
        </div>
        <div style="display: block">
            <canvas baseChart
              [datasets]="bubbleChartData"
              [options]="bubbleChartOptions"
              [colors]="bubbleChartColors"
              [legend]="bubbleChartLegend"
              [chartType]="bubbleChartType">
            </canvas>
          </div>
      </div>
  </div>
</div>