Added sample bubble chart

package-lock.json

@@ -760,9 +760,9 @@
       }
     },
     "@types/chart.js": {
-      "version": "2.7.54",
+      "version": "2.7.55",
-      "resolved": "https://registry.npmjs.org/@types/chart.js/-/chart.js-2.7.54.tgz",
+      "resolved": "https://registry.npmjs.org/@types/chart.js/-/chart.js-2.7.55.tgz",
-      "integrity": "sha512-BxIUR4mfk0zOqOPEu4gxLP5herra6INQLyFmgVE6JVRNNB+r36g2cd67nDUEEdD/EShZvaR33xausxOGv1+nbw=="
+      "integrity": "sha512-CACGbxPkr0vcyrZFpDAr4dqpfgu/PiHWzsKAhXdY+g72Laebjn/dijr7ExwVv9JS/99KrhtKmfJ0vBEhPTJBTQ=="
     },
     "@types/events": {
       "version": "3.0.0",
@@ -2142,11 +2142,11 @@
       "integrity": "sha512-aoAzpf9KuoDH+4qwj13gx6NOKcwJkgDQrOvIIoaO1e7LR/XXeNlDbDUMnkptmuIfIaqllZQSnR2cNa8vYWd1gw=="
     },
     "chartjs-color": {
-      "version": "2.1.0",
+      "version": "2.3.0",
-      "resolved": "https://registry.npmjs.org/chartjs-color/-/chartjs-color-2.1.0.tgz",
+      "resolved": "https://registry.npmjs.org/chartjs-color/-/chartjs-color-2.3.0.tgz",
-      "integrity": "sha1-nDmsgwzNmJlq6AyfEQhv8SyYp1Y=",
+      "integrity": "sha512-hEvVheqczsoHD+fZ+tfPUE+1+RbV6b+eksp2LwAhwRTVXEjCSEavvk+Hg3H6SZfGlPh/UfmWKGIvZbtobOEm3g==",
       "requires": {
-        "chartjs-color-string": "^0.4.0",
+        "chartjs-color-string": "^0.6.0",
         "color-convert": "^0.5.3"
       },
       "dependencies": {
@@ -2158,9 +2158,9 @@
       }
     },
     "chartjs-color-string": {
-      "version": "0.4.0",
+      "version": "0.6.0",
-      "resolved": "https://registry.npmjs.org/chartjs-color-string/-/chartjs-color-string-0.4.0.tgz",
+      "resolved": "https://registry.npmjs.org/chartjs-color-string/-/chartjs-color-string-0.6.0.tgz",
-      "integrity": "sha1-V3SNRTCuKNjbClSSGCugbf3y9Gg=",
+      "integrity": "sha512-TIB5OKn1hPJvO7JcteW4WY/63v6KwEdt6udfnDE9iCAZgy+V4SrbSxoIbTw/xkUIapjEI4ExGtD0+6D3KyFd7A==",
       "requires": {
         "color-name": "^1.0.0"
       }

package.json

@@ -43,7 +43,7 @@
     "jszip": "^3.2.2",
     "luxon": "^1.16.1",
     "moment": "^2.24.0",
-    "ng2-charts": "2.3.0",
+    "ng2-charts": "^2.3.0",
     "ng2-validation-manager": "0.5.3",
     "ngx-bootstrap": "^5.0.0",
     "ngx-pagination": "^4.0.0",

src/app/app.module.ts

@@ -55,6 +55,7 @@ import { MoreStuffComponent } from './dashboard/more-graphs-and-tables.component
     BsDropdownModule.forRoot(),
     TabsModule.forRoot(),
     AuthModule,
+    ChartsModule,
     DashboardModule,
     // Loaded last to allow for 404 catchall
     AppRoutingModule,

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

@@ -1,3 +1,4 @@
+<script src="node_modules/chart.js/src/chart.js"></script>
 <div class="animated fadeIn">
   <div class="form-group row">
     <div class="card-block">
@@ -6,8 +7,14 @@
             <h4 class="card-title mb-0">Weekly Spending by Category</h4>
           </div>
         </div>
-        <div class="chart-wrapper">
+        <div style="display: block">
-          <canvas baseChart class="chart"></canvas>
+            <canvas baseChart
+              [datasets]="bubbleChartData"
+              [options]="bubbleChartOptions"
+              [colors]="bubbleChartColors"
+              [legend]="bubbleChartLegend"
+              [chartType]="bubbleChartType">
+            </canvas>
           </div>
       </div>
   </div>

src/app/dashboard/more-graphs-and-tables.component.ts

@@ -1,5 +1,8 @@
 import { Component, OnInit, AfterViewInit, Input, Output, EventEmitter, ViewChild, TemplateRef } from '@angular/core';
 import { ApiService } from '../providers/api-service';
+import { ChartOptions, ChartType, ChartDataSets } from 'chart.js';
+import { Color } from 'ng2-charts';
+import { BubbleChartComponent } from '../panels/bubble-panel';
 import { AgmCoreModule } from '@agm/core';
 import { BsModalService, ModalDirective } from 'ngx-bootstrap/modal';
 import { BsModalRef } from 'ngx-bootstrap/modal/bs-modal-ref.service';
@@ -16,6 +19,64 @@ export class MoreStuffComponent implements OnInit {  // if you wanna rename this
   @Output() public onClick = new EventEmitter();
   @Input() public categories: any;
 
+  // chart data
+  public bubbleChartOptions: ChartOptions = {
+    responsive: true,
+    scales: {
+      xAxes: [
+        {
+          ticks: {
+            min: 0,
+            max: 30,
+          }
+        }
+      ],
+      yAxes: [
+        {
+          ticks: {
+            min: 0,
+            max: 30,
+          }
+        }
+      ]
+    }
+  };
+  public bubbleChartType: ChartType = 'bubble';
+  public bubbleChartLegend = true;
+
+  public bubbleChartData: ChartDataSets[] = [
+    {
+      data: [
+        { x: 10, y: 10, r: 10 },
+        { x: 15, y: 5, r: 15 },
+        { x: 26, y: 12, r: 23 },
+        { x: 7, y: 8, r: 8 },
+      ],
+      label: 'Series A',
+      backgroundColor: 'green',
+      borderColor: 'blue',
+      hoverBackgroundColor: 'purple',
+      hoverBorderColor: 'red',
+    },
+  ];
+
+  public bubbleChartColors: Color[] = [
+    {
+      backgroundColor: [
+        'red',
+        'green',
+        'blue',
+        'purple',
+        'yellow',
+        'brown',
+        'magenta',
+        'cyan',
+        'orange',
+        'pink'
+      ]
+    }
+  ];
+
   public recurClick(event: any): void {
     this.onClick.emit( event );
   }
@@ -27,4 +88,9 @@ export class MoreStuffComponent implements OnInit {  // if you wanna rename this
   ngOnInit(): void {
     
   }
+
+  private setChartData(dataCat: any) {
+    
   }
+}
+

src/app/panels/bubble-panel.html

@@ -1,17 +1,13 @@
-<div class="card">
+<div>
-  <div class="card-block">
+    <div>
-    <div class="row">
+      <div style="display: block">
-      <div class="col-12">
+        <canvas baseChart
-        <h4 class="card-title mb-0">Spend by company and sector</h4>
-      </div>
-    </div>
-    <div class"chart-wrapper">
-      <canvas baseChart class="chart"
           [datasets]="bubbleChartData"
           [options]="bubbleChartOptions"
           [colors]="bubbleChartColors"
           [legend]="bubbleChartLegend"
-      [chartType]="bubbleChartType"></canvas>
+          [chartType]="bubbleChartType">
+        </canvas>
       </div>
     </div>
   </div>