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">
      <div class="card-block">
          <div class="row">
            <div class="col-12">
              <h4 class="card-title mb-0">Spend by Company Type</h4>
              </div>
            </div>
            <div style="display: block">
                <canvas baseChart
                  [datasets]="bubbleChartDataCategory"
                  [options]="bubbleChartOptionsCategory"
                  [colors]="sampleBubbleChartColors"
                  [labels]="bubbleChartLabelsCategory"
                  [legend]="chartLegend"
                  [chartType]="chartType"
                  (chartHover)="chartHovered($event)"
                  (chartClick)="chartClicked($event)">

                   <!--bootstrapColours-->
                </canvas>
          </div>
        </div>
    </div>
  <!-- </div> -->
</div>