feat: Add customization line style

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

@@ -96,6 +96,7 @@ export class BarVerticalComponent extends BaseChartComponent {
   @Input() legend = false;
   @Input() legendTitle: string = 'Legend';
   @Input() legendPosition: LegendPosition = LegendPosition.Right;
+  @Input() lineType: string = 'straight';
   @Input() xAxis;
   @Input() yAxis;
   @Input() showXAxisLabel: boolean;
@@ -177,6 +178,7 @@ export class BarVerticalComponent extends BaseChartComponent {
 
     this.setColors();
     this.legendOptions = this.getLegendOptions();
+    this.lineType = this.getLineType();
 
     this.transform = `translate(${this.dims.xOffset} , ${this.margin[0] + this.dataLabelMaxHeight.negative})`;
   }
@@ -246,6 +248,10 @@ export class BarVerticalComponent extends BaseChartComponent {
     return opts;
   }
 
+  getLineType() {
+    return this.lineType;
+  }
+
   updateYAxisWidth({ width }): void {
     this.yAxisWidth = width;
     this.update();

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

@@ -96,6 +96,7 @@ import { isPlatformServer } from '@angular/common';
                 [rangeFillOpacity]="rangeFillOpacity"
                 [hasRange]="hasRange"
                 [animations]="animations"
+                [style]="getLineStyle()"
               />
             </svg:g>
           </svg:g>
@@ -202,6 +203,8 @@ import { isPlatformServer } from '@angular/common';
 export class LineChartComponent extends BaseChartComponent implements OnInit {
   @Input() legend: boolean;
   @Input() legendTitle: string = 'Legend';
+  @Input() lineType: string = 'straight';
+  @Input() lineStyle: string = '';
   @Input() legendPosition: LegendPosition = LegendPosition.Right;
   @Input() xAxis: boolean;
   @Input() yAxis: boolean;
@@ -459,6 +462,22 @@ export class LineChartComponent extends BaseChartComponent implements OnInit {
     return `${item.name}`;
   }
 
+  getLineStyle() {
+    if (this.lineType === 'dash') {
+      return { 'stroke-dasharray': '5,5' };
+    } else if (this.lineType === 'dash-dot') {
+      return { 'stroke-dasharray': '1,3,5,3' };
+    } else if (this.lineType === 'dot') {
+      return { 'stroke-dasharray': '2,5' };
+    } else if (this.lineType === 'dash-dot2') {
+      return { 'stroke-dasharray': '1,3,1,3,5,3' };
+    }else if (this.lineType === 'customize') {
+      return { 'stroke-dasharray': this.lineStyle };
+    } else {
+      return {};
+    }
+  }
+
   setColors(): void {
     let domain;
     if (this.schemeType === ScaleType.Ordinal) {

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

@@ -1,5 +1,5 @@
 import { Component, Input, OnChanges, SimpleChanges, ChangeDetectionStrategy } from '@angular/core';
-import { area, line } from 'd3-shape';
+import { area, line, curveLinear } from 'd3-shape';
 
 import { id } from '../utils/id';
 import { sortLinear, sortByTime, sortByDomain } from '../utils/sort';
@@ -73,6 +73,7 @@ export class LineSeriesComponent implements OnChanges {
   @Input() rangeFillOpacity: number;
   @Input() hasRange: boolean;
   @Input() animations: boolean = true;
+  @Input() lineType: string = 'straight';
 
   path: string;
   outerPath: string;
@@ -120,7 +121,7 @@ export class LineSeriesComponent implements OnChanges {
   }
 
   getLineGenerator(): any {
-    return line<any>()
+    let lineGenerator = line<any>()
       .x(d => {
         const label = d.name;
         let value;
@@ -135,6 +136,15 @@ export class LineSeriesComponent implements OnChanges {
       })
       .y(d => this.yScale(d.value))
       .curve(this.curve);
+
+    if (this.lineType === 'dot') {
+      lineGenerator = lineGenerator
+        .defined(d => d != null)
+        .defined(d => this.yScale(d.value) != null)
+        .curve(curveLinear);
+    }
+
+    return lineGenerator;
   }
 
   getRangeGenerator(): any {

src/app/app.component.html

@@ -356,6 +356,8 @@
         [legend]="showLegend"
         [legendTitle]="legendTitle"
         [legendPosition]="legendPosition"
+        [lineType]="lineType"
+        [lineStyle]="lineStyle"
         [gradient]="gradient"
         [xAxis]="showXAxis"
         [yAxis]="showYAxis"
@@ -585,6 +587,8 @@
         [legend]="showLegend"
         [legendTitle]="legendTitle"
         [legendPosition]="legendPosition"
+        [lineType]="lineType"
+        [lineStyle]="lineStyle"
         [showGridLines]="showGridLines"
         [showXAxisLabel]="showXAxisLabel"
         [showYAxisLabel]="showYAxisLabel"
@@ -823,6 +827,8 @@
           [legend]="false"
           [legendTitle]="legendTitle"
           [legendPosition]="legendPosition"
+          [lineType]="lineType"
+          [lineStyle]="lineStyle"
           [gradient]="gradient"
           [xAxis]="showXAxis"
           [yAxis]="showYAxis"
@@ -957,6 +963,8 @@ <h4 style="text-align: center">
         [legend]="showLegend"
         [legendTitle]="legendTitle"
         [legendPosition]="legendPosition"
+        [lineType]="lineType"
+        [lineStyle]="lineStyle"
         [gradient]="gradient"
         [xAxis]="showXAxis"
         [yAxis]="showYAxis"
@@ -1334,9 +1342,27 @@ <h3 (click)="optsVisible = !optsVisible" style="cursor: pointer">
           </label>
           <br />
         </div>
+        <div *ngIf="chart.options.includes('lineType')">
+          <label>Line Type:</label><br />
+          <select style="margin-left: 10px" [(ngModel)]="lineType">
+            <option value="straight">Straight line</option>
+            <option value="dash">Dash line</option>
+            <option value="dot">Dot line</option>
+            <option value="dash-dot">Dash-dot1 line</option>
+            <option value="dash-dot2">Dash-dot2 line</option>
+            <option value="customize">Customized line</option>
+          </select><br />
+        </div>
+        <div *ngIf="lineType === 'customize'">
+          <label>Line Style:</label>
+          <form #form="ngForm">
+            <input style="margin-left: 10px" type="text" [(ngModel)]="lineStyle" name="lineStyle" #lineStyleCtrl="ngModel" pattern="^(\d+,)*\d+,*$" placeholder="For example: 5,5"/>
+            <div *ngIf="lineStyleCtrl.errors?.pattern" style="color: red;">Invalid input. Please enter numbers separated by commas.</div>
+          </form>
+        </div>
         <div *ngIf="chart.options.includes('legendTitle')">
           <label>Legend Title:</label><br />
-          <input type="text" [(ngModel)]="legendTitle" /><br />
+          <input type="number" [(ngModel)]="legendTitle" /><br />
         </div>
         <div *ngIf="chart.options.includes('legendPosition')">
           <label>Legend Position:</label><br />

src/app/app.component.ts

@@ -88,6 +88,8 @@ export class AppComponent implements OnInit {
   showLegend = true;
   legendTitle = 'Legend';
   legendPosition = LegendPosition.Right;
+  lineType = 'straight';
+  lineStyle = '';
   showXAxisLabel = true;
   tooltipDisabled = false;
   showText = true;
@@ -227,7 +229,7 @@ export class AppComponent implements OnInit {
     name: 'singleLightBlue',
     selectable: true,
     group: ScaleType.Ordinal,
-    domain: ['#01579b']
+    domain: ['#01579b'],
   };
 
   showRightYAxisLabel: boolean = true;
@@ -506,6 +508,8 @@ export class AppComponent implements OnInit {
     this.linearScale = false;
     this.yAxisLabel = 'GDP Per Capita';
     this.xAxisLabel = 'Country';
+    this.lineType = 'straight';
+    this.lineStyle = '';
 
     this.width = 700;
     this.height = 300;

src/app/chartTypes.ts

@@ -365,7 +365,8 @@ const chartGroups = [
           'rotateXAxisTicks',
           'maxXAxisTickLength',
           'maxYAxisTickLength',
-          'wrapTicks'
+          'wrapTicks',
+          'lineType'
         ],
         defaults: {
           yAxisLabel: 'GDP Per Capita',
@@ -708,7 +709,8 @@ const chartGroups = [
           'yAxisLabel',
           'showGridLines',
           'roundDomains',
-          'tooltipDisabled'
+          'tooltipDisabled',
+          'lineType',
         ]
       },
       {

src/app/custom-charts/combo-chart/combo-chart.component.html

@@ -1,7 +1,7 @@
 <ngx-charts-chart
   [view]="[width + legendSpacing, height]"
   [showLegend]="legend"
-  [legendOptions]="legendOptions"
+[legendOptions]="legendOptions"
   [activeEntries]="activeEntries"
   [animations]="animations"
   (legendLabelClick)="onClick($event)"
@@ -79,6 +79,7 @@
           [curve]="curve"
           [rangeFillOpacity]="rangeFillOpacity"
           [animations]="animations"
+          [style]="getLineStyle()"
         />
       </svg:g>
 

src/app/custom-charts/combo-chart/combo-chart.component.ts

@@ -35,6 +35,8 @@ export class ComboChartComponent extends BaseChartComponent {
   @Input() legend = false;
   @Input() legendTitle: string = 'Legend';
   @Input() legendPosition: string = 'right';
+  @Input() lineType: string = 'straight';
+  @Input() lineStyle: string = '';
   @Input() xAxis;
   @Input() yAxis;
   @Input() showXAxisLabel;
@@ -117,7 +119,7 @@ export class ComboChartComponent extends BaseChartComponent {
       showYLabel: this.showYAxisLabel,
       showLegend: this.legend,
       legendType: this.schemeType,
-      legendPosition: this.legendPosition as any
+      legendPosition: this.legendPosition as any,
     });
 
     if (!this.yAxis) {
@@ -147,6 +149,13 @@ export class ComboChartComponent extends BaseChartComponent {
     this.transform = `translate(${this.dims.xOffset} , ${this.margin[0]})`;
   }
 
+  ngAfterViewInit() {
+    if (this.lineSeriesComponent) {
+      this.lineSeriesComponent.lineType = this.lineType;
+      this.lineSeriesComponent.update();
+    }
+  }
+
   deactivateAll() {
     this.activeEntries = [...this.activeEntries];
     for (const entry of this.activeEntries) {
@@ -186,6 +195,22 @@ export class ComboChartComponent extends BaseChartComponent {
     return this.combinedSeries.map(d => d.name);
   }
 
+  getLineStyle() {
+    if (this.lineType === 'dash') {
+      return { 'stroke-dasharray': '5,5' };
+    } else if (this.lineType === 'dash-dot') {
+      return { 'stroke-dasharray': '1,3,5,3' };
+    } else if (this.lineType === 'dot') {
+      return { 'stroke-dasharray': '2,5' };
+    } else if (this.lineType === 'dash-dot2') {
+      return { 'stroke-dasharray': '1,3,1,3,5,3' };
+    }else if (this.lineType === 'customize') {
+      return { 'stroke-dasharray': this.lineStyle };
+    } else {
+      return {};
+    }
+  }
+
   isDate(value): boolean {
     if (value instanceof Date) {
       return true;