CtrlK
BlogDocsLog inGet started
Tessl Logo

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

area-charts.mddocs/

Area Charts

Area chart components for visualizing cumulative data trends and part-to-whole relationships over continuous intervals with support for stacking and normalization.

Capabilities

Area Chart

Standard area chart for displaying data trends with filled areas below the line.

@Component({ selector: 'ngx-charts-area-chart' })
export class AreaChartComponent extends BaseChartComponent {
  @Input() results: MultiSeries;
  @Input() legend: boolean = false;
  @Input() legendTitle: string = 'Legend';
  @Input() legendPosition: LegendPosition = LegendPosition.Right;
  @Input() xAxis: boolean = false;
  @Input() yAxis: boolean = false;
  @Input() baseValue: any = 'auto';
  @Input() autoScale: boolean = false;
  @Input() showXAxisLabel: boolean;
  @Input() showYAxisLabel: boolean;
  @Input() xAxisLabel: string;
  @Input() yAxisLabel: string;
  @Input() timeline: boolean = false;
  @Input() gradient: boolean;
  @Input() showGridLines: boolean = true;
  @Input() curve: CurveFactory = curveLinear;
  @Input() activeEntries: any[] = [];
  @Input() schemeType: ScaleType;
  @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() referenceLines: any[];
  @Input() showRefLines: boolean = false;
  @Input() showRefLabels: boolean = false;
  @Input() xScaleMin: any;
  @Input() xScaleMax: any;
  @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-area-chart',
  template: `
    <ngx-charts-area-chart
      [results]="areaData"
      [xAxis]="true"
      [yAxis]="true"
      [legend]="true"
      [showXAxisLabel]="true"
      [showYAxisLabel]="true"
      xAxisLabel="Time Period"
      yAxisLabel="Revenue ($)"
      [gradient]="true"
      [curve]="curveCardinal"
      [baseValue]="0"
      (select)="onSelect($event)">
    </ngx-charts-area-chart>
  `
})
export class AreaChartComponent {
  curveCardinal = curveCardinal;
  
  areaData = [
    {
      name: 'Product Revenue',
      series: [
        { name: 'Jan', value: 45000 },
        { name: 'Feb', value: 52000 },
        { name: 'Mar', value: 48000 },
        { name: 'Apr', value: 61000 },
        { name: 'May', value: 55000 },
        { name: 'Jun', value: 67000 }
      ]
    },
    {
      name: 'Service Revenue',
      series: [
        { name: 'Jan', value: 25000 },
        { name: 'Feb', value: 28000 },
        { name: 'Mar', value: 32000 },
        { name: 'Apr', value: 29000 },
        { name: 'May', value: 35000 },
        { name: 'Jun', value: 38000 }
      ]
    }
  ];

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

Stacked Area Chart

Area chart where multiple series are stacked on top of each other to show cumulative values and individual contributions.

@Component({ selector: 'ngx-charts-area-chart-stacked' })
export class AreaChartStackedComponent {
  @Input() results: MultiSeries;
  @Input() legend: boolean = false;
  @Input() legendTitle: string = 'Legend';
  @Input() legendPosition: LegendPosition = LegendPosition.Right;
  @Input() xAxis: boolean = false;
  @Input() yAxis: boolean = false;
  @Input() showXAxisLabel: boolean = false;
  @Input() showYAxisLabel: boolean = false;
  @Input() xAxisLabel: string = '';
  @Input() yAxisLabel: string = '';
  @Input() timeline: boolean = false;
  @Input() gradient: boolean = false;
  @Input() showGridLines: boolean = true;
  @Input() curve: CurveFactory;
  @Input() activeEntries: any[] = [];
  @Input() schemeType: ScaleType = ScaleType.Ordinal;
  @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() scheme: any;
  @Input() customColors: any;
  @Input() animations: boolean = true;
  @Input() autoScale: boolean = false;
  @Input() xScaleMin: any;
  @Input() xScaleMax: any;
  @Input() yScaleMin: number;
  @Input() yScaleMax: number;
  @Input() tooltipDisabled: boolean = false;
  @Input() tooltipTemplate: TemplateRef<any>;
  @Input() seriesTooltipTemplate: TemplateRef<any>;
  @Input() ariaLabel: string = 'stacked area chart';
  
  @Output() activate: EventEmitter<any> = new EventEmitter();
  @Output() deactivate: EventEmitter<any> = new EventEmitter();
  @Output() select: EventEmitter<any> = new EventEmitter();
}

Stacked Area Usage:

@Component({
  template: `
    <ngx-charts-area-chart-stacked
      [results]="stackedData"
      [xAxis]="true"
      [yAxis]="true"
      [legend]="true"
      [gradient]="true"
      [timeline]="true">
    </ngx-charts-area-chart-stacked>
  `
})
export class StackedAreaComponent {
  stackedData = [
    {
      name: 'Desktop',
      series: [
        { name: 'Q1', value: 73000 },
        { name: 'Q2', value: 89000 },
        { name: 'Q3', value: 92000 },
        { name: 'Q4', value: 105000 }
      ]
    },
    {
      name: 'Mobile',
      series: [
        { name: 'Q1', value: 42000 },
        { name: 'Q2', value: 55000 },
        { name: 'Q3', value: 61000 },
        { name: 'Q4', value: 78000 }
      ]
    },
    {
      name: 'Tablet',
      series: [
        { name: 'Q1', value: 15000 },
        { name: 'Q2', value: 18000 },
        { name: 'Q3', value: 22000 },
        { name: 'Q4', value: 28000 }
      ]
    }
  ];
}

Normalized Area Chart

Stacked area chart normalized to 100% to show proportional relationships over time.

@Component({ selector: 'ngx-charts-area-chart-normalized' })
export class AreaChartNormalizedComponent {
  @Input() results: MultiSeries;
  @Input() legend: boolean = false;
  @Input() legendTitle: string = 'Legend';
  @Input() legendPosition: LegendPosition = LegendPosition.Right;
  @Input() xAxis: boolean = false;
  @Input() yAxis: boolean = false;
  @Input() showXAxisLabel: boolean = false;
  @Input() showYAxisLabel: boolean = false;
  @Input() xAxisLabel: string = '';
  @Input() yAxisLabel: string = '';
  @Input() timeline: boolean = false;
  @Input() gradient: boolean = false;
  @Input() showGridLines: boolean = true;
  @Input() curve: CurveFactory;
  @Input() activeEntries: any[] = [];
  @Input() schemeType: ScaleType = ScaleType.Ordinal;
  @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() scheme: any;
  @Input() customColors: any;
  @Input() animations: boolean = true;
  @Input() autoScale: boolean = false;
  @Input() xScaleMin: any;
  @Input() xScaleMax: any;
  @Input() tooltipDisabled: boolean = false;
  @Input() tooltipTemplate: TemplateRef<any>;
  @Input() seriesTooltipTemplate: TemplateRef<any>;
  @Input() ariaLabel: string = 'normalized area chart';
  
  @Output() activate: EventEmitter<any> = new EventEmitter();
  @Output() deactivate: EventEmitter<any> = new EventEmitter();
  @Output() select: EventEmitter<any> = new EventEmitter();
}

Base Value Configuration

Control the baseline of area charts for custom area filling behavior.

// Base value options
@Input() baseValue: any = 'auto'; // 'auto', number, or Date

// Base value types
type BaseValueType = 'auto' | number | Date;

// Auto baseline calculation based on data range
// Number baseline for fixed baseline value  
// Date baseline for time-based charts

Base Value Examples:

@Component({
  template: `
    <!-- Auto baseline (default) -->
    <ngx-charts-area-chart [baseValue]="'auto'"></ngx-charts-area-chart>
    
    <!-- Zero baseline -->
    <ngx-charts-area-chart [baseValue]="0"></ngx-charts-area-chart>
    
    <!-- Custom numeric baseline -->
    <ngx-charts-area-chart [baseValue]="50"></ngx-charts-area-chart>
    
    <!-- Date baseline for time series -->
    <ngx-charts-area-chart [baseValue]="baselineDate"></ngx-charts-area-chart>
  `
})
export class BaseValueComponent {
  baselineDate = new Date('2023-01-01');
}

Supporting Components

// Area series component for rendering individual area series
@Component({ selector: 'g[ngx-charts-area-series]' })
export class AreaSeriesComponent {
  @Input() data: Series;
  @Input() xScale: any;
  @Input() yScale: any;
  @Input() baseValue: any;
  @Input() colors: any;
  @Input() scaleType: ScaleType;
  @Input() stacked: boolean = false;
  @Input() normalized: boolean = false;
  @Input() curve: CurveFactory;
  @Input() activeEntries: any[];
  @Input() animations: boolean = true;
  @Input() gradient: boolean;
  
  @Output() select: EventEmitter<DataItem> = new EventEmitter();
  @Output() activate: EventEmitter<DataItem> = new EventEmitter();
  @Output() deactivate: EventEmitter<DataItem> = new EventEmitter();
}

// Individual area component
@Component({ selector: 'g[ngx-charts-area]' })
export class AreaComponent {
  @Input() data: DataItem[];
  @Input() path: string;
  @Input() startingPath: string;
  @Input() fill: string;
  @Input() opacity: number = 1;
  @Input() startOpacity: number = 0.1;
  @Input() endOpacity: number = 1;
  @Input() gradient: boolean = false;
  @Input() animations: boolean = true;
  @Input() class: string;
  
  @Output() select: EventEmitter<DataItem> = new EventEmitter();
}

Advanced Features

Timeline Integration

Area charts support timeline brush functionality for interactive zooming and panning.

@Input() timeline: boolean = false;

// Timeline automatically appears below the main chart when enabled
// Provides brush selection for zooming into data ranges

Range Fill Opacity

Control the opacity of range areas in area charts with min/max values.

@Input() rangeFillOpacity: number = 0.15;

// Used when data includes min/max range values
// Creates confidence interval or error band visualization

Gradient Effects

Apply gradient fills to area charts for enhanced visual appeal.

@Input() gradient: boolean = false;

// Gradients are automatically generated based on the color scheme
// Creates smooth color transitions within area fills

Data Structures

// Area chart data with optional range values
interface AreaChartDataItem extends DataItem {
  d0?: number; // Baseline value for stacked areas
  d1?: number; // Top value for stacked areas
  min?: number; // Minimum value for range areas
  max?: number; // Maximum value for range areas
}

interface AreaChartSeries extends Series {
  series: AreaChartDataItem[];
}

// Stacking types
enum D0Type {
  Positive = 'positive',
  Negative = 'negative'
}

Error Handling

Area charts handle various data edge cases gracefully:

  • Missing Data Points: Automatically interpolates or breaks area paths
  • Negative Values: Supports negative value areas with proper baseline calculation
  • Empty Series: Gracefully handles empty or null data series
  • Date Gaps: Handles non-continuous time series data appropriately

Install with Tessl CLI

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

docs

area-charts.md

bar-charts.md

gauge-charts.md

index.md

line-charts.md

other-charts.md

pie-charts.md

styling-theming.md

tile.json