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

Bar Charts

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

Comprehensive bar chart components for displaying categorical data with support for vertical, horizontal, stacked, grouped, and normalized configurations.

Capabilities

Vertical Bar Chart

Standard vertical bar chart for displaying categorical data with values extending upward.

@Component({ selector: 'ngx-charts-bar-vertical' })
export class BarVerticalComponent extends BaseChartComponent {
  @Input() results: SingleSeries;
  @Input() legend: boolean = false;
  @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() tooltipDisabled: boolean = false;
  @Input() gradient: boolean;
  @Input() referenceLines: any[];
  @Input() showRefLines: boolean;
  @Input() showRefLabels: boolean;
  @Input() showGridLines: boolean = true;
  @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() barPadding: number = 8;
  @Input() roundDomains: boolean = false;
  @Input() roundEdges: boolean = true;
  @Input() yScaleMax: number;
  @Input() yScaleMin: number;
  @Input() showDataLabel: boolean = false;
  @Input() dataLabelFormatting: any;
  @Input() noBarWhenZero: boolean = true;
  @Input() wrapTicks: boolean = false;
  
  @Output() activate: EventEmitter<any> = new EventEmitter();
  @Output() deactivate: EventEmitter<any> = new EventEmitter();
  
  @ContentChild('tooltipTemplate') tooltipTemplate: TemplateRef<any>;
}

Usage Examples:

import { Component } from '@angular/core';

@Component({
  selector: 'app-bar-chart',
  template: `
    <ngx-charts-bar-vertical
      [results]="singleData"
      [xAxis]="true"
      [yAxis]="true"
      [legend]="true"
      [showXAxisLabel]="true"
      [showYAxisLabel]="true"
      xAxisLabel="Categories"
      yAxisLabel="Sales ($)"
      [barPadding]="10"
      [showDataLabel]="true"
      (select)="onSelect($event)"
      (activate)="onActivate($event)">
    </ngx-charts-bar-vertical>
  `
})
export class BarChartComponent {
  singleData = [
    { name: 'Q1', value: 89000 },
    { name: 'Q2', value: 105000 },
    { name: 'Q3', value: 96000 },
    { name: 'Q4', value: 112000 }
  ];

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

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

Horizontal Bar Chart

Horizontal bar chart with bars extending rightward, ideal for long category names.

@Component({ selector: 'ngx-charts-bar-horizontal' })
export class BarHorizontalComponent {
  @Input() results: SingleSeries;
  @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() showGridLines: boolean = true;
  @Input() roundDomains: boolean = false;
  @Input() scheme: any;
  @Input() schemeType: ScaleType = ScaleType.Ordinal;
  @Input() customColors: any;
  @Input() animations: boolean = true;
  @Input() barPadding: number = 8;
  @Input() groupPadding: number = 16;
  @Input() roundEdges: boolean = true;
  @Input() xScaleMax: number;
  @Input() xScaleMin: number = 0;
  @Input() showDataLabel: boolean = false;
  @Input() dataLabelFormatting: any;
  @Input() noBarWhenZero: boolean = true;
  @Input() gradient: boolean = false;
  @Input() activeEntries: any[] = [];
  @Input() tooltipDisabled: boolean = false;
  @Input() tooltipTemplate: TemplateRef<any>;
  @Input() ariaLabel: string = 'horizontal bar chart';
  
  @Output() select: EventEmitter<DataItem> = new EventEmitter();
  @Output() activate: EventEmitter<DataItem> = new EventEmitter();
  @Output() deactivate: EventEmitter<DataItem> = new EventEmitter();
  @Output() dataLabelHeightChanged: EventEmitter<any> = new EventEmitter();
}

Grouped Bar Charts (2D)

Multi-series bar charts displaying multiple data sets side-by-side for comparison.

@Component({ selector: 'ngx-charts-bar-vertical-2d' })
export class BarVertical2DComponent {
  @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() showGridLines: boolean = true;
  @Input() roundDomains: boolean = false;
  @Input() scheme: any;
  @Input() schemeType: ScaleType = ScaleType.Ordinal;
  @Input() customColors: any;
  @Input() animations: boolean = true;
  @Input() barPadding: number = 8;
  @Input() groupPadding: number = 16;
  @Input() roundEdges: boolean = true;
  @Input() yScaleMax: number;
  @Input() yScaleMin: number = 0;
  @Input() showDataLabel: boolean = false;
  @Input() dataLabelFormatting: any;
  @Input() noBarWhenZero: boolean = true;
  @Input() gradient: boolean = false;
  @Input() activeEntries: any[] = [];
  @Input() tooltipDisabled: boolean = false;
  @Input() tooltipTemplate: TemplateRef<any>;
  @Input() ariaLabel: string = 'grouped bar chart';
  
  @Output() select: EventEmitter<DataItem> = new EventEmitter();
  @Output() activate: EventEmitter<DataItem> = new EventEmitter();
  @Output() deactivate: EventEmitter<DataItem> = new EventEmitter();
  @Output() dataLabelHeightChanged: EventEmitter<any> = new EventEmitter();
}

@Component({ selector: 'ngx-charts-bar-horizontal-2d' })
export class BarHorizontal2DComponent {
  @Input() results: MultiSeries;
  // ... similar inputs to BarVertical2DComponent
}

Usage Examples:

@Component({
  template: `
    <ngx-charts-bar-vertical-2d
      [results]="multiData"
      [xAxis]="true"
      [yAxis]="true"
      [legend]="true"
      [groupPadding]="20"
      [barPadding]="5">
    </ngx-charts-bar-vertical-2d>
  `
})
export class GroupedBarComponent {
  multiData = [
    {
      name: 'Product A',
      series: [
        { name: 'Q1', value: 25000 },
        { name: 'Q2', value: 30000 },
        { name: 'Q3', value: 28000 }
      ]
    },
    {
      name: 'Product B', 
      series: [
        { name: 'Q1', value: 32000 },
        { name: 'Q2', value: 27000 },
        { name: 'Q3', value: 35000 }
      ]
    }
  ];
}

Stacked Bar Charts

Bar charts where multiple series are stacked on top of each other to show cumulative values.

@Component({ selector: 'ngx-charts-bar-vertical-stacked' })
export class BarVerticalStackedComponent {
  @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() showGridLines: boolean = true;
  @Input() roundDomains: boolean = false;
  @Input() scheme: any;
  @Input() schemeType: ScaleType = ScaleType.Ordinal;
  @Input() customColors: any;
  @Input() animations: boolean = true;
  @Input() barPadding: number = 8;
  @Input() roundEdges: boolean = true;
  @Input() yScaleMax: number;
  @Input() yScaleMin: number = 0;
  @Input() showDataLabel: boolean = false;
  @Input() dataLabelFormatting: any;
  @Input() noBarWhenZero: boolean = true;
  @Input() gradient: boolean = false;
  @Input() activeEntries: any[] = [];
  @Input() tooltipDisabled: boolean = false;
  @Input() tooltipTemplate: TemplateRef<any>;
  @Input() ariaLabel: string = 'stacked bar chart';
  
  @Output() select: EventEmitter<DataItem> = new EventEmitter();
  @Output() activate: EventEmitter<DataItem> = new EventEmitter();
  @Output() deactivate: EventEmitter<DataItem> = new EventEmitter();
  @Output() dataLabelHeightChanged: EventEmitter<any> = new EventEmitter();
}

@Component({ selector: 'ngx-charts-bar-horizontal-stacked' })
export class BarHorizontalStackedComponent {
  @Input() results: MultiSeries;
  // ... similar inputs to BarVerticalStackedComponent
}

Normalized Bar Charts

Stacked bar charts normalized to 100% to show proportional relationships.

@Component({ selector: 'ngx-charts-bar-vertical-normalized' })
export class BarVerticalNormalizedComponent {
  @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() showGridLines: boolean = true;
  @Input() roundDomains: boolean = false;
  @Input() scheme: any;
  @Input() schemeType: ScaleType = ScaleType.Ordinal;
  @Input() customColors: any;
  @Input() animations: boolean = true;
  @Input() barPadding: number = 8;
  @Input() roundEdges: boolean = true;
  @Input() showDataLabel: boolean = false;
  @Input() dataLabelFormatting: any;
  @Input() noBarWhenZero: boolean = true;
  @Input() gradient: boolean = false;
  @Input() activeEntries: any[] = [];
  @Input() tooltipDisabled: boolean = false;
  @Input() tooltipTemplate: TemplateRef<any>;
  @Input() ariaLabel: string = 'normalized bar chart';
  
  @Output() select: EventEmitter<DataItem> = new EventEmitter();
  @Output() activate: EventEmitter<DataItem> = new EventEmitter();
  @Output() deactivate: EventEmitter<DataItem> = new EventEmitter();
  @Output() dataLabelHeightChanged: EventEmitter<any> = new EventEmitter();
}

@Component({ selector: 'ngx-charts-bar-horizontal-normalized' })
export class BarHorizontalNormalizedComponent {
  @Input() results: MultiSeries;
  // ... similar inputs to BarVerticalNormalizedComponent
}

Data Label Formatting

// Custom data label formatting function type
type DataLabelFormatting = (value: any) => string;

// Example formatters
const currencyFormatter: DataLabelFormatting = (value) => `$${value.toLocaleString()}`;
const percentFormatter: DataLabelFormatting = (value) => `${value}%`;
const shortenedFormatter: DataLabelFormatting = (value) => {
  if (value >= 1000000) return `${(value / 1000000).toFixed(1)}M`;
  if (value >= 1000) return `${(value / 1000).toFixed(1)}K`;
  return value.toString();
};

Supporting Components

// Individual bar renderer
@Component({ selector: 'g[ngx-charts-bar]' })
export class BarComponent {
  @Input() fill: string;
  @Input() data: DataItem;
  @Input() width: number;
  @Input() height: number;
  @Input() x: number;
  @Input() y: number;
  @Input() orientation: BarOrientation;
  @Input() roundEdges: boolean;
  @Input() gradient: boolean;
  @Input() isActive: boolean;
  @Input() animations: boolean;
  @Input() ariaLabel: string;
  @Input() noBarWhenZero: boolean;
  
  @Output() select: EventEmitter<DataItem> = new EventEmitter();
  @Output() activate: EventEmitter<DataItem> = new EventEmitter();
  @Output() deactivate: EventEmitter<DataItem> = new EventEmitter();
}

// Bar label renderer
@Component({ selector: 'g[ngx-charts-bar-label]' })
export class BarLabelComponent {
  @Input() value: any;
  @Input() valueFormatting: any;
  @Input() barX: number;
  @Input() barY: number;
  @Input() barWidth: number;
  @Input() barHeight: number;
  @Input() orientation: BarOrientation;
  
  @Output() dimensionsChanged: EventEmitter<any> = new EventEmitter();
}

Enums and Types

enum BarOrientation {
  Vertical = 'vertical',
  Horizontal = 'horizontal'
}

enum BarChartType {
  Standard = 'standard',
  Grouped = 'grouped',  
  Stacked = 'stacked',
  Normalized = 'normalized'
}

Install with Tessl CLI

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

docs