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

<script src="node_modules/chart.js/src/chart.js"></script>
<!--
  <div class="form-group row">
    <div class="card-block">
        <div class="row">
          <div class="col-12">
            <h4 class="card-title mb-0">Spend by Industrial Sector</h4>
          </div>
        </div>
        <div style="display: block">
            <canvas baseChart
              [datasets]="sampleBubbleChartData"
              [options]="sampleBubbleChartOptions"
              [colors]="sampleBubbleChartColors"
              [legend]="sampleBubbleChartLegend"
              [chartType]="sampleBubbleChartType">
            </canvas>
          </div>
      </div>
  </div>
</div>-->
<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 Region</h4>
              </div>
            </div>
            <div style="display: block">
                <canvas baseChart
                  [datasets]="bubbleChartDataCategory"
                  [options]="bubbleChartOptionsCategory"
                  [colors]="sampleBubbleChartColors"
                  [labels]="bubbleChartLabelsCategory"
                  [legend]="chartLegend"
                  [chartType]="chartType"> <!--bootstrapColours-->
                </canvas>
          </div>
        </div>
    </div>
  <!-- </div> -->
</div>