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

Pie Charts

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

Circular chart components for displaying part-to-whole relationships with support for advanced features, grid layouts, and donut configurations.

Capabilities

Pie Chart

Standard pie chart for displaying proportional data as slices of a circle.

@Component({ selector: 'ngx-charts-pie-chart' })
export class PieChartComponent {
  @Input() results: SingleSeries;
  @Input() legend: boolean = false;
  @Input() legendTitle: string = 'Legend';
  @Input() legendPosition: LegendPosition = LegendPosition.Right;
  @Input() explodeSlices: boolean = false;
  @Input() labels: boolean = false;
  @Input() doughnut: boolean = false;
  @Input() arcWidth: number = 0.25;
  @Input() gradient: boolean = false;
  @Input() activeEntries: any[] = [];
  @Input() scheme: any;
  @Input() customColors: any;
  @Input() animations: boolean = true;
  @Input() trimLabels: boolean = true;
  @Input() maxLabelLength: number = 10;
  @Input() labelFormatting: any;
  @Input() tooltipDisabled: boolean = false;
  @Input() tooltipTemplate: TemplateRef<any>;
  @Input() tooltipText: any;
  @Input() ariaLabel: string = 'pie chart';
  
  @Output() select: EventEmitter<DataItem> = new EventEmitter();
  @Output() activate: EventEmitter<DataItem> = new EventEmitter();
  @Output() deactivate: EventEmitter<DataItem> = new EventEmitter();
  @Output() dblclick: EventEmitter<DataItem> = new EventEmitter();
}

Usage Examples:

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

@Component({
  selector: 'app-pie-chart',
  template: `
    <ngx-charts-pie-chart
      [results]="pieData"
      [legend]="true"
      [explodeSlices]="false"
      [labels]="true"
      [doughnut]="false"
      [gradient]="true"
      [maxLabelLength]="15"
      (select)="onSelect($event)">
    </ngx-charts-pie-chart>
  `
})
export class PieChartComponent {
  pieData = [
    { name: 'Desktop', value: 8940000 },
    { name: 'Mobile', value: 5000000 },
    { name: 'Tablet', value: 2000000 },
    { name: 'Other', value: 1000000 }
  ];

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

Advanced Pie Chart

Enhanced pie chart with additional features and customization options.

@Component({ selector: 'ngx-charts-advanced-pie-chart' })
export class AdvancedPieChartComponent {
  @Input() results: SingleSeries;
  @Input() gradient: boolean = false;
  @Input() activeEntries: any[] = [];
  @Input() scheme: any;
  @Input() customColors: any;
  @Input() animations: boolean = true;
  @Input() tooltipDisabled: boolean = false;
  @Input() tooltipTemplate: TemplateRef<any>;
  @Input() tooltipText: any;
  @Input() valueFormatting: any;
  @Input() nameFormatting: any;
  @Input() percentFormatting: any;
  @Input() ariaLabel: string = 'advanced pie chart';
  
  @Output() select: EventEmitter<DataItem> = new EventEmitter();
  @Output() activate: EventEmitter<DataItem> = new EventEmitter();
  @Output() deactivate: EventEmitter<DataItem> = new EventEmitter();
  @Output() dblclick: EventEmitter<DataItem> = new EventEmitter();
}

Advanced Pie Usage:

@Component({
  template: `
    <ngx-charts-advanced-pie-chart
      [results]="data"
      [gradient]="true"
      [valueFormatting]="valueFormatter"
      [nameFormatting]="nameFormatter"
      [percentFormatting]="percentFormatter">
    </ngx-charts-advanced-pie-chart>
  `
})
export class AdvancedPieComponent {
  valueFormatter = (value: number) => `$${value.toLocaleString()}`;
  nameFormatter = (name: string) => name.toUpperCase();
  percentFormatter = (value: number) => `${value.toFixed(1)}%`;
}

Pie Grid

Grid layout displaying multiple mini pie charts for comparing different datasets.

@Component({ selector: 'ngx-charts-pie-grid' })
export class PieGridComponent {
  @Input() results: PieGridData[];
  @Input() designatedTotal: number;
  @Input() tooltipDisabled: boolean = false;
  @Input() tooltipTemplate: TemplateRef<any>;
  @Input() label: string = 'Total';
  @Input() minWidth: number = 150;
  @Input() activeEntries: any[] = [];
  @Input() scheme: any;
  @Input() customColors: any;
  @Input() animations: boolean = true;
  @Input() ariaLabel: string = 'pie grid';
  
  @Output() activate: EventEmitter<any> = new EventEmitter();
  @Output() deactivate: EventEmitter<any> = new EventEmitter();
  @Output() select: EventEmitter<DataItem> = new EventEmitter();
}

Pie Grid Usage:

@Component({
  template: `
    <ngx-charts-pie-grid
      [results]="gridData"
      [designatedTotal]="1000000"
      [minWidth]="120"
      [label]="'Revenue'">
    </ngx-charts-pie-grid>
  `
})
export class PieGridComponent {
  gridData = [
    {
      name: 'Q1 2023',
      data: [
        { name: 'Product A', value: 89000 },
        { name: 'Product B', value: 56000 },
        { name: 'Product C', value: 45000 }
      ]
    },
    {
      name: 'Q2 2023', 
      data: [
        { name: 'Product A', value: 95000 },
        { name: 'Product B', value: 62000 },
        { name: 'Product C', value: 38000 }
      ]
    }
  ];
}

Donut Chart Configuration

Transform pie charts into donut charts by adjusting the arc width.

// Donut chart configuration
@Input() doughnut: boolean = false;
@Input() arcWidth: number = 0.25; // Thickness of the donut ring (0-1)

// When doughnut = true, creates hollow center
// arcWidth controls the thickness of the ring
// arcWidth = 1.0 creates full pie
// arcWidth = 0.1 creates thin ring

Donut Chart Examples:

@Component({
  template: `
    <!-- Standard donut chart -->
    <ngx-charts-pie-chart
      [results]="data"
      [doughnut]="true"
      [arcWidth]="0.3">
    </ngx-charts-pie-chart>
    
    <!-- Thin ring donut -->
    <ngx-charts-pie-chart
      [results]="data"
      [doughnut]="true"
      [arcWidth]="0.15">
    </ngx-charts-pie-chart>
    
    <!-- Thick donut -->
    <ngx-charts-pie-chart
      [results]="data"
      [doughnut]="true"
      [arcWidth]="0.5">
    </ngx-charts-pie-chart>
  `
})
export class DonutChartComponent {
  // Donut charts use same data as pie charts
}

Supporting Components

// Pie series component for rendering pie slices
@Component({ selector: 'g[ngx-charts-pie-series]' })
export class PieSeriesComponent {
  @Input() colors: any;
  @Input() series: DataItem[];
  @Input() dims: ViewDimensions;
  @Input() innerRadius: number = 60;
  @Input() outerRadius: number = 80;
  @Input() explodeSlices: boolean;
  @Input() showLabels: boolean;
  @Input() gradient: boolean;
  @Input() activeEntries: any[];
  @Input() labelFormatting: any;
  @Input() trimLabels: boolean = true;
  @Input() maxLabelLength: number = 10;
  @Input() tooltipTemplate: TemplateRef<any>;
  @Input() tooltipDisabled: boolean = false;
  @Input() animations: boolean = true;
  
  @Output() select: EventEmitter<DataItem> = new EventEmitter();
  @Output() activate: EventEmitter<DataItem> = new EventEmitter();
  @Output() deactivate: EventEmitter<DataItem> = new EventEmitter();
  @Output() dblclick: EventEmitter<DataItem> = new EventEmitter();
}

// Individual pie arc component
@Component({ selector: 'g[ngx-charts-pie-arc]' })
export class PieArcComponent {
  @Input() fill: string;
  @Input() startAngle: number;
  @Input() endAngle: number;
  @Input() innerRadius: number;
  @Input() outerRadius: number;
  @Input() cornerRadius: number = 0;
  @Input() value: number;
  @Input() max: number;
  @Input() data: DataItem;
  @Input() explodeSlices: boolean;
  @Input() gradient: boolean;
  @Input() animate: boolean = true;
  @Input() pointerEvents: boolean = true;
  @Input() isActive: boolean = false;
  
  @Output() select: EventEmitter<DataItem> = new EventEmitter();
  @Output() activate: EventEmitter<DataItem> = new EventEmitter();
  @Output() deactivate: EventEmitter<DataItem> = new EventEmitter();
  @Output() dblclick: EventEmitter<DataItem> = new EventEmitter();
}

// Pie label component
@Component({ selector: 'g[ngx-charts-pie-label]' })
export class PieLabelComponent {
  @Input() data: DataItem;
  @Input() radius: number;
  @Input() label: string;
  @Input() color: string;
  @Input() max: number;
  @Input() value: number;
  @Input() explodeSlices: boolean;
  @Input() animations: boolean = true;
  @Input() labelTrim: boolean = true;
  @Input() labelTrimSize: number = 10;
  @Input() trimLabel: any;
}

// Pie grid series component
@Component({ selector: 'g[ngx-charts-pie-grid-series]' })
export class PieGridSeriesComponent {
  @Input() colors: any;
  @Input() data: PieGridData;
  @Input() innerRadius: number = 15;
  @Input() outerRadius: number = 80;
  @Input() animations: boolean = true;
  
  @Output() select: EventEmitter<DataItem> = new EventEmitter();
  @Output() activate: EventEmitter<any> = new EventEmitter();
  @Output() deactivate: EventEmitter<any> = new EventEmitter();
}

Label Formatting

// Label formatting function types
type LabelFormatting = (value: any) => string;
type ValueFormatting = (value: number) => string;
type NameFormatting = (name: string) => string; 
type PercentFormatting = (value: number) => string;

// Example formatters
const currencyFormatter: ValueFormatting = (value) => `$${value.toLocaleString()}`;
const percentFormatter: PercentFormatting = (value) => `${value.toFixed(1)}%`;
const shortNameFormatter: NameFormatting = (name) => name.length > 12 ? name.substring(0, 12) + '...' : name;

// Label trimming configuration
@Input() trimLabels: boolean = true;
@Input() maxLabelLength: number = 10;

Exploding Slices

// Explode slices configuration
@Input() explodeSlices: boolean = false;

// When enabled, separates pie slices with small gaps
// Creates visual emphasis and separation between segments
// Automatically calculates appropriate spacing based on chart size

Data Structures

// Pie chart data structure (single series)
type PieChartData = SingleSeries;

// Pie grid data structure
interface PieGridData {
  name: string;
  data: DataItem[];
}

// Pie arc calculation result
interface PieArc {
  startAngle: number;
  endAngle: number;
  value: number;
  data: DataItem;
  index: number;
}

Advanced Customization

Custom Colors

// Custom color configuration
@Input() customColors: any;

// Example custom color scheme
const customColors = [
  { name: 'Desktop', value: '#1f77b4' },
  { name: 'Mobile', value: '#ff7f0e' },
  { name: 'Tablet', value: '#2ca02c' }
];

Tooltip Customization

// Custom tooltip template
@Input() tooltipTemplate: TemplateRef<any>;
@Input() tooltipText: any;

// Default tooltip displays name and value
// Custom templates allow full control over tooltip content and styling

Custom Tooltip Example:

@Component({
  template: `
    <ngx-charts-pie-chart
      [results]="data"
      [tooltipTemplate]="tooltipTemplate">
    </ngx-charts-pie-chart>
    
    <ng-template #tooltipTemplate let-model="model">
      <div class="custom-tooltip">
        <strong>{{ model.name }}</strong><br>
        Value: {{ model.value | currency }}<br>
        Percentage: {{ model.percent | percent:'1.1-1' }}
      </div>
    </ng-template>
  `
})
export class CustomTooltipPieComponent { }

Accessibility

All pie chart components include ARIA support for screen readers:

@Input() ariaLabel: string = 'pie chart';

// Automatically generates appropriate ARIA labels for slices
// Supports keyboard navigation through chart elements
// Provides meaningful descriptions for assistive technologies

Install with Tessl CLI

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

docs