Custom bubble chart

projects/swimlane/ngx-charts/src/lib/bubble-chart/bubble-chart.module.ts

@@ -2,10 +2,11 @@ import { NgModule } from '@angular/core';
 import { ChartCommonModule } from '../common/chart-common.module';
 import { BubbleChartComponent } from './bubble-chart.component';
 import { BubbleSeriesComponent } from './bubble-series.component';
+import { BubbleChart2DComponent } from './bubble-chart-2d.component';
 
 @NgModule({
   imports: [ChartCommonModule],
-  declarations: [BubbleChartComponent, BubbleSeriesComponent],
-  exports: [BubbleChartComponent, BubbleSeriesComponent]
+  declarations: [BubbleChartComponent, BubbleSeriesComponent, BubbleChart2DComponent],
+  exports: [BubbleChartComponent, BubbleSeriesComponent, BubbleChart2DComponent]
 })
 export class BubbleChartModule {}

projects/swimlane/ngx-charts/src/lib/bubble-chart/bubble-series.component.ts

@@ -163,6 +163,49 @@ export class BubbleSeriesComponent implements OnChanges, OnInit {
             radius: d.r
           });
 
+          return {
+            data,
+            x,
+            y,
+            r,
+            classNames: [`circle-data-${i}`],
+            value: y,
+            label: x,
+            cx,
+            cy,
+            radius,
+            tooltipLabel,
+            color,
+            opacity,
+            seriesName,
+            isActive,
+            transform: `translate(${cx},${cy})`
+          };
+        } else {
+          const y = this.data.name;
+          const x = d.x;
+          const r = d.r;
+
+          const radius = this.rScale(r || 1);
+          const tooltipLabel = formatLabel(this.data.name);
+
+          const cx = this.xScaleType === ScaleType.Linear ? this.xScale(Number(x)) : this.xScale(x);
+          const cy = this.yScaleType === ScaleType.Linear ? this.yScale(Number(y)) : this.yScale(y);
+
+          const color =
+            this.colors.scaleType === ScaleType.Linear ? this.colors.getColor(r) : this.colors.getColor(seriesName);
+
+          const isActive = !this.activeEntries.length ? true : this.isActive({ name: seriesName });
+          const opacity = isActive ? 1 : 0.3;
+
+          const data = Object.assign({}, d, {
+            series: seriesName,
+            name: this.data.name,
+            value: this.data.name,
+            x: d.x,
+            radius: d.r
+          });
+
           return {
             data,
             x,
@@ -198,7 +241,9 @@ export class BubbleSeriesComponent implements OnChanges, OnInit {
     const y = formatLabel(circle.y);
     const name =
       hasSeriesName && hasTooltipLabel
-        ? `${circle.seriesName} • ${circle.tooltipLabel}`
+        ? circle.seriesName === circle.tooltipLabel
+          ? circle.seriesName
+          : `${circle.seriesName} • ${circle.tooltipLabel}`
         : circle.seriesName + circle.tooltipLabel;
     const tooltipTitle =
       hasSeriesName || hasTooltipLabel ? `<span class="tooltip-label">${escapeLabel(name)}</span>` : '';

projects/swimlane/ngx-charts/src/lib/models/chart-data.model.ts

@@ -61,6 +61,19 @@ export interface BubbleChartSeries {
 
 export interface BubbleChartMultiSeries extends Array<BubbleChartSeries> {}
 
+export interface BubbleChart2DDataItem {
+  x: StringOrNumberOrDate;
+  r: number;
+  extra?: any;
+}
+
+export interface BubbleChart2DSeries {
+  name: StringOrNumberOrDate;
+  series: BubbleChart2DDataItem[];
+}
+
+export interface BubbleChart2DMultiSeries extends Array<BubbleChart2DSeries> {}
+
 export interface TreeMapDataItem {
   name: StringOrNumberOrDate;
   size?: number;

src/app/app.component.html

@@ -946,6 +946,45 @@ <h4 style="text-align: center">
         >
         </ngx-charts-bubble-chart-interactive>
       </div>
+      <ngx-charts-bubble-chart-2d
+      *ngIf="chartType === 'bubble-chart-2d'"
+      [view]="view"
+      class="chart-container"
+      [results]="bubble2d"
+      [animations]="animations"
+      [showGridLines]="showGridLines"
+      [lineTransparency]="lineTransparency"
+      [legend]="showLegend"
+      [legendTitle]="legendTitle"
+      [legendPosition]="legendPosition"
+      [xAxis]="showXAxis"
+      [yAxis]="showYAxis"
+      [showXAxisLabel]="showXAxisLabel"
+      [showYAxisLabel]="showYAxisLabel"
+      [xAxisLabel]="xAxisLabel"
+      [yAxisLabel]="yAxisLabel"
+      [autoScale]="autoScale"
+      [xScaleMin]="xScaleMin"
+      [xScaleMax]="xScaleMax"
+      [yScaleMin]="yScaleMin"
+      [yScaleMax]="yScaleMax"
+      [scheme]="colorScheme"
+      [schemeType]="schemeType"
+      [roundDomains]="roundDomains"
+      [tooltipDisabled]="tooltipDisabled"
+      [minRadius]="minRadius"
+      [maxRadius]="maxRadius"
+      [trimXAxisTicks]="trimXAxisTicks"
+      [trimYAxisTicks]="trimYAxisTicks"
+      [rotateXAxisTicks]="rotateXAxisTicks"
+      [maxXAxisTickLength]="maxXAxisTickLength"
+      [maxYAxisTickLength]="maxYAxisTickLength"
+      [wrapTicks]="wrapTicks"
+      (activate)="activate($event)"
+      (deactivate)="deactivate($event)"
+      (select)="select($event)"
+    >
+    </ngx-charts-bubble-chart-2d>
       <ngx-charts-line-chart
         *ngIf="chartType === 'line-reference-lines'"
         [view]="view"
@@ -1156,6 +1195,7 @@ <h3 (click)="dataVisible = !dataVisible" style="cursor: pointer">
         <pre *ngIf="chart.inputFormat === 'boxMultiSeries'">{{ boxData | json }}</pre>
         <pre *ngIf="chart.inputFormat === 'bubble'">{{ bubble | json }}</pre>
         <pre *ngIf="chart.inputFormat === 'bubbleInteractive'">{{ bubbleDemoTempData | json }}</pre>
+        <pre *ngIf="chart.inputFormat === 'bubble2d'">{{ bubble2d | json }}</pre>
         <pre *ngIf="chart.inputFormat === 'comboChart'">{{ barChart | json }}</pre>
         <pre *ngIf="chart.inputFormat === 'comboChart'">{{ lineChartSeries | json }}</pre>
         <pre *ngIf="chart.inputFormat === 'timelineFilter'">{{ timelineFilterBarData | json }}</pre>
@@ -1334,6 +1374,11 @@ <h3 (click)="optsVisible = !optsVisible" style="cursor: pointer">
           </label>
           <br />
         </div>
+        <div *ngIf="chart.options.includes('lineTransparency')" style="display: flex; align-items: center;">
+          <label>Line Transparency:</label>
+          <input type="range" min="0" max="100" [(ngModel)]="lineTransparency" />
+          {{ lineTransparency }}<br /> 
+        </div>
         <div *ngIf="chart.options.includes('legendTitle')">
           <label>Legend Title:</label><br />
           <input type="text" [(ngModel)]="legendTitle" /><br />

src/app/app.component.ts

@@ -10,6 +10,7 @@ import {
   multi,
   boxData,
   bubble,
+  bubble2d,
   sankeyData,
   generateData,
   generateGraph,
@@ -73,6 +74,7 @@ export class AppComponent implements OnInit {
   timelineFilterBarData: any[];
   graph: { links: any[]; nodes: any[] };
   bubble: any;
+  bubble2d: any;
   linearScale: boolean = false;
   range: boolean = false;
 
@@ -87,6 +89,7 @@ export class AppComponent implements OnInit {
   gradient = false;
   showLegend = true;
   legendTitle = 'Legend';
+  lineTransparency = 0;
   legendPosition = LegendPosition.Right;
   showXAxisLabel = true;
   tooltipDisabled = false;
@@ -281,6 +284,7 @@ export class AppComponent implements OnInit {
       graph: generateGraph(50),
       boxData,
       bubble,
+      bubble2d,
       plotData: this.generatePlotData(),
       treemap,
       bubbleDemoData,

src/app/chartTypes.ts

@@ -781,6 +781,46 @@ const chartGroups = [
           maxRadius: 20
         }
       },
+      {
+        name: 'Bubble Chart 2D',
+        selector: 'bubble-chart-2d',
+        inputFormat: 'bubble2d',
+        options: [
+          'animations',
+          'colorScheme',
+          'schemeType',
+          'showXAxis',
+          'showYAxis',
+          'showLegend',
+          'lineTransparency',
+          'legendTitle',
+          'legendPosition',
+          'showXAxisLabel',
+          'xAxisLabel',
+          'showYAxisLabel',
+          'yAxisLabel',
+          'showGridLines',
+          'roundDomains',
+          'autoScale',
+          'minRadius',
+          'maxRadius',
+          'tooltipDisabled',
+          'xScaleMin',
+          'xScaleMax',
+          'yScaleMin',
+          'yScaleMax',
+          'trimXAxisTicks',
+          'trimYAxisTicks',
+          'rotateXAxisTicks',
+          'maxXAxisTickLength',
+          'maxYAxisTickLength',
+          'wrapTicks'
+        ],
+        defaults: {
+          xAxisLabel: 'Census Date',
+          yAxisLabel: 'Country'
+        }
+      },
       {
         name: 'Equation Plots',
         selector: 'plot-demo',

src/app/data.ts

@@ -6,7 +6,8 @@ import {
   BoxChartMultiSeries,
   Series,
   TreeMapData,
-  SankeyData
+  SankeyData,
+  BubbleChart2DMultiSeries
 } from '@swimlane/ngx-charts/models/chart-data.model';
 
 export const single: SingleSeries = [
@@ -311,6 +312,77 @@ export const bubble: BubbleChartMultiSeries = [
   }
 ];
 
+export const bubble2d: BubbleChart2DMultiSeries = [
+  {
+    name: 'Germany',
+    series: [
+      {
+        x: '2010',
+        r: 8.4
+      },
+      {
+        x: '2000',
+        r: 1278
+      },
+      {
+        x: '1990',
+        r: 579
+      }
+    ]
+  },
+  {
+    name: 'United States',
+    series: [
+      {
+        x: '2010',
+        r: 10
+      },
+      {
+        x: '2000',
+        r: 2783
+      },
+      {
+        x: '1990',
+        r: 253
+      }
+    ]
+  },
+  {
+    name: 'France',
+    series: [
+      {
+        x: '2010',
+        r: 63
+      },
+      {
+        x: '2000',
+        r: 99.2
+      },
+      {
+        x: '1990',
+        r: 0.01
+      }
+    ]
+  },
+  {
+    name: 'United Kingdom',
+    series: [
+      {
+        x: '2010',
+        r: 62.7
+      },
+      {
+        x: '2000',
+        r: 58.9
+      },
+      {
+        x: '1990',
+        r: 57.1
+      }
+    ]
+  }
+];
+
 export const boxData: BoxChartMultiSeries = [
   {
     name: 'Colombia',