tessl/npm-swimlane--ngx-charts

Declarative charting framework for Angular that renders charts using SVG elements through Angular's binding system with extensive chart type support and D3.js integration

—

Pending

Overview

Eval results

Files

Line Charts

Name: tessl/npm-swimlane--ngx-charts
Author: tessl

Line chart components for visualizing data trends and changes over continuous intervals with support for multiple series, curve interpolation, and timeline features.

Capabilities

Line Chart

Standard line chart for displaying data trends over time or continuous scales.

@Component({ selector: 'ngx-charts-line-chart' })
export class LineChartComponent extends BaseChartComponent implements OnInit {
  @Input() results: MultiSeries;
  @Input() legend: boolean;
  @Input() legendTitle: string = 'Legend';
  @Input() legendPosition: LegendPosition = LegendPosition.Right;
  @Input() xAxis: boolean;
  @Input() yAxis: boolean;
  @Input() showXAxisLabel: boolean;
  @Input() showYAxisLabel: boolean;
  @Input() xAxisLabel: string;
  @Input() yAxisLabel: string;
  @Input() autoScale: boolean;
  @Input() timeline: boolean;
  @Input() gradient: boolean;
  @Input() showGridLines: boolean = true;
  @Input() curve: any = curveLinear;
  @Input() activeEntries: any[] = [];
  @Input() schemeType: ScaleType;
  @Input() rangeFillOpacity: number;
  @Input() trimXAxisTicks: boolean = true;
  @Input() trimYAxisTicks: boolean = true;
  @Input() rotateXAxisTicks: boolean = true;
  @Input() maxXAxisTickLength: number = 16;
  @Input() maxYAxisTickLength: number = 16;
  @Input() xAxisTickFormatting: any;
  @Input() yAxisTickFormatting: any;
  @Input() xAxisTicks: any[];
  @Input() yAxisTicks: any[];
  @Input() roundDomains: boolean = false;
  @Input() tooltipDisabled: boolean = false;
  @Input() showRefLines: boolean = false;
  @Input() referenceLines: any;
  @Input() showRefLabels: boolean = true;
  @Input() xScaleMin: number;
  @Input() xScaleMax: number;
  @Input() yScaleMin: number;
  @Input() yScaleMax: number;
  @Input() wrapTicks: boolean = false;
  
  @Output() activate: EventEmitter<any> = new EventEmitter();
  @Output() deactivate: EventEmitter<any> = new EventEmitter();
  
  @ContentChild('tooltipTemplate') tooltipTemplate: TemplateRef<any>;
  @ContentChild('seriesTooltipTemplate') seriesTooltipTemplate: TemplateRef<any>;
}

Usage Examples:

import { Component } from '@angular/core';
import { curveCardinal } from 'd3-shape';

@Component({
  selector: 'app-line-chart',
  template: `
    <ngx-charts-line-chart
      [results]="lineData"
      [xAxis]="true"
      [yAxis]="true"
      [legend]="true"
      [showXAxisLabel]="true"
      [showYAxisLabel]="true"
      xAxisLabel="Time"
      yAxisLabel="Value"
      [curve]="curveCardinal"
      [showGridLines]="true"
      [timeline]="true"
      (select)="onSelect($event)"
      (activate)="onActivate($event)">
    </ngx-charts-line-chart>
  `
})
export class LineChartComponent {
  curveCardinal = curveCardinal;
  
  lineData = [
    {
      name: 'Series A',
      series: [
        { name: new Date('2023-01-01'), value: 25 },
        { name: new Date('2023-02-01'), value: 30 },
        { name: new Date('2023-03-01'), value: 28 },
        { name: new Date('2023-04-01'), value: 35 },
        { name: new Date('2023-05-01'), value: 32 }
      ]
    },
    {
      name: 'Series B',
      series: [
        { name: new Date('2023-01-01'), value: 20 },
        { name: new Date('2023-02-01'), value: 25 },
        { name: new Date('2023-03-01'), value: 30 },
        { name: new Date('2023-04-01'), value: 28 },
        { name: new Date('2023-05-01'), value: 33 }
      ]
    }
  ];

  onSelect(event: any): void {
    console.log('Selected:', event);
  }

  onActivate(event: any): void {
    console.log('Activated:', event);
  }
}

Timeline Feature

Interactive timeline brush for zooming and panning through large datasets.

// Timeline is enabled via the timeline input property
@Input() timeline: boolean = false;

// Timeline emits brush events for handling zoom/pan interactions
@Output() brushed: EventEmitter<any> = new EventEmitter();

Timeline Usage:

@Component({
  template: `
    <ngx-charts-line-chart
      [results]="timeSeriesData"
      [timeline]="true"
      (brushed)="onBrushed($event)">
    </ngx-charts-line-chart>
  `
})
export class TimelineComponent {
  onBrushed(event: any): void {
    // Handle timeline brush events
    console.log('Brushed range:', event);
  }
}

Curve Interpolation

Support for various D3 curve interpolation methods to control line smoothness.

// Available curve types from D3
import {
  curveLinear,
  curveStepBefore,
  curveStepAfter,
  curveStep,
  curveBasis,
  curveCardinal,
  curveMonotoneX,
  curveCatmullRom
} from 'd3-shape';

type CurveFactory = any; // D3 curve factory function

Curve Examples:

import { 
  curveLinear, 
  curveCardinal, 
  curveBasis, 
  curveMonotoneX 
} from 'd3-shape';

@Component({
  template: `
    <!-- Linear interpolation (default) -->
    <ngx-charts-line-chart [curve]="curveLinear"></ngx-charts-line-chart>
    
    <!-- Smooth cardinal curve -->
    <ngx-charts-line-chart [curve]="curveCardinal"></ngx-charts-line-chart>
    
    <!-- Basis spline curve -->
    <ngx-charts-line-chart [curve]="curveBasis"></ngx-charts-line-chart>
    
    <!-- Monotone curve (preserves monotonicity) -->
    <ngx-charts-line-chart [curve]="curveMonotoneX"></ngx-charts-line-chart>
  `
})
export class CurveExamplesComponent {
  curveLinear = curveLinear;
  curveCardinal = curveCardinal;
  curveBasis = curveBasis;
  curveMonotoneX = curveMonotoneX;
}

Reference Lines

Overlay reference lines and labels for highlighting specific values or thresholds.

interface ReferenceLine {
  name: string;
  value: number | Date;
  label?: string;
}

// Reference line inputs
@Input() referenceLines: ReferenceLine[] = [];
@Input() showRefLines: boolean = false;
@Input() showRefLabels: boolean = true;

Reference Line Usage:

@Component({
  template: `
    <ngx-charts-line-chart
      [results]="data"
      [referenceLines]="referenceLines"
      [showRefLines]="true"
      [showRefLabels]="true">
    </ngx-charts-line-chart>
  `
})
export class ReferenceLineComponent {
  referenceLines = [
    { name: 'Target', value: 50, label: 'Goal' },
    { name: 'Warning', value: 75, label: 'Warning Level' },
    { name: 'Critical', value: 90, label: 'Critical' }
  ];
}

Supporting Components

// Line series component for rendering individual line series
@Component({ selector: 'g[ngx-charts-line-series]' })
export class LineSeriesComponent {
  @Input() data: Series;
  @Input() xScale: any;
  @Input() yScale: any;
  @Input() colors: any;
  @Input() scaleType: ScaleType;
  @Input() curve: CurveFactory;  
  @Input() activeEntries: any[];
  @Input() rangeFillOpacity: number;
  @Input() hasRange: boolean;
  @Input() animations: boolean;
  
  @Output() select: EventEmitter<DataItem> = new EventEmitter();
  @Output() activate: EventEmitter<DataItem> = new EventEmitter();
  @Output() deactivate: EventEmitter<DataItem> = new EventEmitter();
}

// Individual line component
@Component({ selector: 'g[ngx-charts-line]' })
export class LineComponent {
  @Input() path: string;
  @Input() stroke: string;
  @Input() data: DataItem[];
  @Input() fill: string = 'none';
  @Input() animations: boolean = true;
  
  @Output() select: EventEmitter<DataItem> = new EventEmitter();
}

// Circle/point component for data points
@Component({ selector: 'g[ngx-charts-circle]' })
export class CircleComponent {
  @Input() cx: number;
  @Input() cy: number;
  @Input() r: number;
  @Input() fill: string;
  @Input() stroke: string;
  @Input() data: DataItem;
  @Input() classNames: string[];
  @Input() circleOpacity: number;
  @Input() pointerEvents: string;
  
  @Output() select: EventEmitter<DataItem> = new EventEmitter();
  @Output() activate: EventEmitter<DataItem> = new EventEmitter();
  @Output() deactivate: EventEmitter<DataItem> = new EventEmitter();
}

// Timeline brush component
@Component({ selector: 'g[ngx-charts-timeline]' })
export class TimelineComponent {
  @Input() results: any[];
  @Input() view: [number, number];
  @Input() height: number;
  @Input() scheme: any;
  @Input() customColors: any;
  @Input() legend: boolean;
  @Input() scaleType: ScaleType;
  @Input() autoScale: boolean;
  
  @Output() onDomainChange: EventEmitter<any> = new EventEmitter();
}

Advanced Features

Multi-axis Support

Line charts can display multiple Y-axes for series with different scales.

// Multi-axis configuration
@Input() yAxisLeft: boolean = true;
@Input() yAxisRight: boolean = false;
@Input() leftAxisScaleType: ScaleType = ScaleType.Linear;
@Input() rightAxisScaleType: ScaleType = ScaleType.Linear;

Range Areas

Display confidence intervals or ranges around line series.

// Range data structure
interface RangeDataItem extends DataItem {
  min: number;
  max: number;
}

// Range fill opacity control
@Input() rangeFillOpacity: number = 0.15;
@Input() hasRange: boolean = false;

Gradient Fills

Apply gradient effects to line strokes and fills.

@Input() gradient: boolean = false;

// Gradient definitions are automatically generated based on color scheme

Data Structures

// Time series data example
interface TimeSeriesData {
  name: string;
  series: Array<{
    name: Date;
    value: number;
    min?: number; // For range charts
    max?: number; // For range charts
  }>;
}

// Numeric series data
interface NumericSeriesData {
  name: string;
  series: Array<{
    name: number;
    value: number;
  }>;
}

Install with Tessl CLI

npx tessl i tessl/npm-swimlane--ngx-charts

docs