Legend customization

projects/swimlane/ngx-charts/src/lib/bar-chart/bar-vertical.component.ts

@@ -27,9 +27,7 @@ import { ViewDimensions } from '../common/types/view-dimension.interface';
       [legendOptions]="legendOptions"
       [activeEntries]="activeEntries"
       [animations]="animations"
-      (legendLabelClick)="onClick($event)"
-      (legendLabelActivate)="onActivate($event, true)"
-      (legendLabelDeactivate)="onDeactivate($event, true)"
+      (legendLabelClick)="onLegendClick($event, true)"
     >
       <svg:g [attr.transform]="transform" class="bar-chart chart">
         <svg:g
@@ -95,6 +93,7 @@ import { ViewDimensions } from '../common/types/view-dimension.interface';
 export class BarVerticalComponent extends BaseChartComponent {
   @Input() legend = false;
   @Input() legendTitle: string = 'Legend';
+  @Input() legendSize: string = 'middle';
   @Input() legendPosition: LegendPosition = LegendPosition.Right;
   @Input() xAxis;
   @Input() yAxis;
@@ -233,12 +232,14 @@ export class BarVerticalComponent extends BaseChartComponent {
       colors: undefined,
       domain: [],
       title: undefined,
-      position: this.legendPosition
+      position: this.legendPosition,
+      fontSize: this.legendSize
     };
     if (opts.scaleType === ScaleType.Ordinal) {
       opts.domain = this.xDomain;
       opts.colors = this.colors;
       opts.title = this.legendTitle;
+      opts.fontSize = this.legendSize
     } else {
       opts.domain = this.yDomain;
       opts.colors = this.colors.scale;
@@ -287,6 +288,31 @@ export class BarVerticalComponent extends BaseChartComponent {
     this.activate.emit({ value: item, entries: this.activeEntries });
   }
 
+  onLegendClick(item, fromLegend: boolean = false): void {
+    item = this.results.find(d => {
+      if (fromLegend) {
+        return d.label === item;
+      } else {
+        return d.name === item;
+      }
+    });
+
+    const idx = this.activeEntries.findIndex(d => {
+      return d.name === item.name && d.value === item.value && d.series === item.series;
+    });
+
+    if (idx > -1) {
+      this.activeEntries.splice(idx, 1);
+      this.deactivate.emit({ value: item, entries: this.activeEntries });
+    } else {
+      this.activeEntries = [item, ...this.activeEntries];
+      this.activate.emit({ value: item, entries: this.activeEntries });
+    }
+
+    this.activeEntries = [...this.activeEntries];
+  }
+
+
   onDeactivate(item, fromLegend = false) {
     item = this.results.find(d => {
       if (fromLegend) {

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

@@ -35,6 +35,7 @@ import { ScaleType } from '../types/scale-type.enum';
         [horizontal]="legendOptions && legendOptions.position === LegendPosition.Below"
         [data]="legendOptions.domain"
         [title]="legendOptions.title"
+        [size]="legendOptions.fontSize"
         [colors]="legendOptions.colors"
         [height]="view[1]"
         [width]="legendWidth"

projects/swimlane/ngx-charts/src/lib/common/legend/legend.component.scss

@@ -8,7 +8,7 @@
     overflow: hidden;
     margin-left: 10px;
     margin-bottom: 5px;
-    font-size: 14px;
+    // font-size: 14px;
     font-weight: bold;
   }
 

projects/swimlane/ngx-charts/src/lib/common/legend/legend.component.ts

@@ -11,20 +11,23 @@ import {
 } from '@angular/core';
 import { formatLabel } from '../label.helper';
 import { ColorHelper } from '../color.helper';
+import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
 
 export interface LegendEntry {
   color: string;
   formattedLabel: string;
   label: string;
 }
-
+// <header class="legend-title" *ngIf="title?.length > 0" [ngStyle]="{'font-size': fontSize}">
+// <span class="legend-title-text">{{ title }}</span>
+// </header>
 @Component({
   selector: 'ngx-charts-legend',
   template: `
     <div [style.width.px]="width">
-      <header class="legend-title" *ngIf="title?.length > 0">
-        <span class="legend-title-text">{{ title }}</span>
-      </header>
+    <header class="legend-title" *ngIf="title?.length > 0" [ngStyle]="{'font-size': fontSize}">
+      <div [innerHTML]="sanitizedLegendTitle"></div>
+    </header>
       <div class="legend-wrap">
         <ul class="legend-labels" [class.horizontal-legend]="horizontal" [style.max-height.px]="height - 45">
           <li *ngFor="let entry of legendEntries; trackBy: trackBy" class="legend-label">
@@ -50,6 +53,7 @@ export interface LegendEntry {
 export class LegendComponent implements OnChanges {
   @Input() data: string[];
   @Input() title: string;
+  @Input() size: string;
   @Input() colors: ColorHelper;
   @Input() height: number;
   @Input() width: number;
@@ -61,8 +65,9 @@ export class LegendComponent implements OnChanges {
   @Output() labelDeactivate: EventEmitter<{ name: string }> = new EventEmitter();
 
   legendEntries: LegendEntry[] = [];
+  fontSize: string;
 
-  constructor(private cd: ChangeDetectorRef) {}
+  constructor(private cd: ChangeDetectorRef, private sanitizer: DomSanitizer) {}
 
   ngOnChanges(changes: SimpleChanges): void {
     this.update();
@@ -71,6 +76,19 @@ export class LegendComponent implements OnChanges {
   update(): void {
     this.cd.markForCheck();
     this.legendEntries = this.getLegendEntries();
+
+    switch (this.size) {
+      case 'large':
+        this.fontSize = '18px';
+        break;
+      case 'small':
+        this.fontSize = '12px';
+        break;
+      case 'middle':
+      default:
+        this.fontSize = '14px';
+        break;
+    }
   }
 
   getLegendEntries(): LegendEntry[] {
@@ -94,6 +112,10 @@ export class LegendComponent implements OnChanges {
     return items;
   }
 
+  get sanitizedLegendTitle(): SafeHtml {
+    return this.sanitizer.bypassSecurityTrustHtml(this.title);
+  }
+
   isActive(entry: LegendEntry): boolean {
     if (!this.activeEntries) return false;
     const item = this.activeEntries.find(d => {

projects/swimlane/ngx-charts/src/lib/common/types/legend.model.ts

@@ -6,11 +6,13 @@ export interface LegendOptions {
   position: LegendPosition;
   title: string;
   scaleType: ScaleType;
+  fontSize?: string;
 }
 
 export enum LegendPosition {
   Right = 'right',
-  Below = 'below'
+  Below = 'below',
+  Left = 'left',
 }
 
 export enum LegendType {

src/app/app.component.html

@@ -15,6 +15,7 @@
         [yAxis]="showYAxis"
         [legend]="showLegend"
         [legendTitle]="legendTitle"
+        [legendSize]="legendSize"
         [legendPosition]="legendPosition"
         [showXAxisLabel]="showXAxisLabel"
         [showYAxisLabel]="showYAxisLabel"
@@ -1338,9 +1339,17 @@ <h3 (click)="optsVisible = !optsVisible" style="cursor: pointer">
           <label>Legend Title:</label><br />
           <input type="text" [(ngModel)]="legendTitle" /><br />
         </div>
+        <div *ngIf="chart.options.includes('legendSize')">
+          <label>Legend Size:</label><br />
+          <select style="margin-left: 10px" [(ngModel)]="legendSize">
+            <option value="small">Small</option>
+            <option value="middle">Middle</option>
+            <option value="large">Large</option></select><br />
+        </div><br />
         <div *ngIf="chart.options.includes('legendPosition')">
           <label>Legend Position:</label><br />
           <select style="margin-left: 10px" [(ngModel)]="legendPosition">
+            <!-- <option value="left">Left</option> -->
             <option value="right">Right</option>
             <option value="below">Below</option></select
           ><br />

src/app/app.component.ts

@@ -87,6 +87,7 @@ export class AppComponent implements OnInit {
   gradient = false;
   showLegend = true;
   legendTitle = 'Legend';
+  legendSize = 'middle';
   legendPosition = LegendPosition.Right;
   showXAxisLabel = true;
   tooltipDisabled = false;

src/app/chartTypes.ts

@@ -17,6 +17,7 @@ const chartGroups = [
           'noBarWhenZero',
           'showLegend',
           'legendTitle',
+          'legendSize',
           'legendPosition',
           'showXAxisLabel',
           'xAxisLabel',