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

other-charts.mddocs/

Other Chart Types

Specialized chart components for specific data visualization needs including bubble charts, heat maps, tree maps, number cards, box plots, polar charts, and Sankey diagrams.

Capabilities

Bubble Chart

Scatter plot with bubble sizes representing a third dimension of data.

@Component({ selector: 'ngx-charts-bubble-chart' })
export class BubbleChartComponent {
  @Input() results: BubbleChartSeries[];
  @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() 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() maxRadius: number = 10;
  @Input() minRadius: number = 3;
  @Input() showGridLines: boolean = true;
  @Input() autoScale: boolean = false;
  @Input() schemeType: ScaleType = ScaleType.Ordinal;
  @Input() scheme: any;
  @Input() customColors: any;
  @Input() activeEntries: any[] = [];
  @Input() xScaleMin: any;
  @Input() xScaleMax: any;
  @Input() yScaleMin: number;
  @Input() yScaleMax: number;
  @Input() animations: boolean = true;
  @Input() tooltipDisabled: boolean = false;
  @Input() tooltipTemplate: TemplateRef<any>;
  @Input() ariaLabel: string = 'bubble chart';
  
  @Output() activate: EventEmitter<any> = new EventEmitter();
  @Output() deactivate: EventEmitter<any> = new EventEmitter();
  @Output() select: EventEmitter<any> = new EventEmitter();
}

Bubble Chart Usage:

@Component({
  template: `
    <ngx-charts-bubble-chart
      [results]="bubbleData"
      [xAxis]="true"
      [yAxis]="true"
      [legend]="true"
      [showXAxisLabel]="true"
      [showYAxisLabel]="true"
      xAxisLabel="Revenue ($)"
      yAxisLabel="Profit Margin (%)"
      [minRadius]="5"
      [maxRadius]="25">
    </ngx-charts-bubble-chart>
  `
})
export class BubbleComponent {
  bubbleData = [
    {
      name: 'Product Category A',
      series: [
        { name: 'Product 1', x: 95000, y: 15.2, r: 12 },
        { name: 'Product 2', x: 87000, y: 22.1, r: 8 },
        { name: 'Product 3', x: 110000, y: 18.7, r: 15 }
      ]
    },
    {
      name: 'Product Category B',
      series: [
        { name: 'Product 4', x: 73000, y: 28.3, r: 10 },
        { name: 'Product 5', x: 125000, y: 12.9, r: 18 }
      ]
    }
  ];
}

Heat Map

Matrix visualization for displaying relationships between two categorical variables.

@Component({ selector: 'ngx-charts-heat-map' })
export class HeatMapComponent {
  @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() gradient: boolean = false;
  @Input() innerPadding: number = 8;
  @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() tooltipDisabled: boolean = false;
  @Input() tooltipTemplate: TemplateRef<any>;
  @Input() scheme: any;
  @Input() customColors: any;
  @Input() animations: boolean = true;
  @Input() ariaLabel: string = 'heat map';
  
  @Output() activate: EventEmitter<any> = new EventEmitter();
  @Output() deactivate: EventEmitter<any> = new EventEmitter();
  @Output() select: EventEmitter<DataItem> = new EventEmitter();
}

Heat Map Usage:

@Component({
  template: `
    <ngx-charts-heat-map
      [results]="heatMapData"
      [xAxis]="true"
      [yAxis]="true"
      [legend]="true"
      [gradient]="true"
      [innerPadding]="4">
    </ngx-charts-heat-map>
  `
})
export class HeatMapComponent {
  heatMapData = [
    {
      name: 'Monday',
      series: [
        { name: '9 AM', value: 45 },
        { name: '10 AM', value: 67 },
        { name: '11 AM', value: 89 },
        { name: '12 PM', value: 102 }
      ]
    },
    {
      name: 'Tuesday',
      series: [
        { name: '9 AM', value: 52 },
        { name: '10 AM', value: 73 },
        { name: '11 AM', value: 95 },
        { name: '12 PM', value: 87 }
      ]
    }
  ];
}

Tree Map

Hierarchical visualization displaying nested data as nested rectangles.

@Component({ selector: 'ngx-charts-tree-map' })
export class TreeMapComponent {
  @Input() results: TreeMapDataItem[];
  @Input() tooltipDisabled: boolean = false;
  @Input() tooltipTemplate: TemplateRef<any>;
  @Input() valueFormatting: any;
  @Input() labelFormatting: any;
  @Input() gradient: boolean = false;
  @Input() scheme: any;
  @Input() customColors: any;
  @Input() animations: boolean = true;
  @Input() ariaLabel: string = 'tree map';
  
  @Output() select: EventEmitter<TreeMapDataItem> = new EventEmitter();
  @Output() activate: EventEmitter<TreeMapDataItem> = new EventEmitter();
  @Output() deactivate: EventEmitter<TreeMapDataItem> = new EventEmitter();
}

Tree Map Usage:

@Component({
  template: `
    <ngx-charts-tree-map
      [results]="treeMapData"
      [gradient]="true"
      [valueFormatting]="valueFormatter"
      [labelFormatting]="labelFormatter">
    </ngx-charts-tree-map>
  `
})
export class TreeMapComponent {
  treeMapData = [
    {
      name: 'Technology',
      value: 500000,
      children: [
        { name: 'Software', value: 300000 },
        { name: 'Hardware', value: 200000 }
      ]
    },
    {
      name: 'Marketing',
      value: 350000,
      children: [
        { name: 'Digital', value: 200000 },
        { name: 'Traditional', value: 150000 }
      ]
    }
  ];

  valueFormatter = (value: number) => `$${value.toLocaleString()}`;
  labelFormatter = (name: string) => name.toUpperCase();
}

Number Card

Grid of key performance indicators (KPIs) displaying important metrics.

@Component({ selector: 'ngx-charts-number-card' })
export class NumberCardComponent {
  @Input() results: SingleSeries;
  @Input() cardColor: string = '#232837';
  @Input() bandColor: string = '#2F3646';
  @Input() emptyColor: string = 'rgba(255, 255, 255, 0.3)';
  @Input() innerPadding: number = 15;
  @Input() textColor: string = '#FFFFFF';
  @Input() valueFormatting: any;
  @Input() labelFormatting: any;
  @Input() designatedTotal: number;
  @Input() animations: boolean = true;
  @Input() ariaLabel: string = 'number card';
  
  @Output() select: EventEmitter<DataItem> = new EventEmitter();
  @Output() activate: EventEmitter<DataItem> = new EventEmitter();
  @Output() deactivate: EventEmitter<DataItem> = new EventEmitter();
}

Number Card Usage:

@Component({
  template: `
    <ngx-charts-number-card
      [results]="numberCardData"
      [cardColor]="'#1E88E5'"
      [textColor]="'#FFFFFF'"
      [valueFormatting]="valueFormatter"
      [innerPadding]="20">
    </ngx-charts-number-card>
  `
})
export class NumberCardComponent {
  numberCardData = [
    { name: 'Total Sales', value: 1250000 },
    { name: 'New Customers', value: 845 },
    { name: 'Conversion Rate', value: 3.2 },
    { name: 'Average Order', value: 247.50 }
  ];

  valueFormatter = (value: number) => {
    if (value > 1000000) return `$${(value / 1000000).toFixed(1)}M`;
    if (value > 1000) return `$${(value / 1000).toFixed(0)}K`;
    return `$${value.toFixed(2)}`;
  };
}

Box Chart

Box and whisker plots for statistical data distribution visualization.

@Component({ selector: 'ngx-charts-box-chart' })
export class BoxChartComponent extends BaseChartComponent {
  @Input() results: BoxChartMultiSeries;
  @Input() legend: boolean = false;
  @Input() legendPosition: LegendPosition = LegendPosition.Right;
  @Input() legendTitle: string = 'Legend';
  @Input() legendOptionsConfig: LegendOptions;
  @Input() showGridLines: boolean = true;
  @Input() xAxis: boolean = true;
  @Input() yAxis: boolean = true;
  @Input() showXAxisLabel: boolean = true;
  @Input() showYAxisLabel: boolean = true;
  @Input() roundDomains: boolean = false;
  @Input() xAxisLabel: string;
  @Input() yAxisLabel: string;
  @Input() roundEdges: boolean = true;
  @Input() strokeColor: string = '#FFFFFF';
  @Input() strokeWidth: number = 2;
  @Input() tooltipDisabled: boolean = false;
  @Input() gradient: boolean;
  @Input() wrapTicks: boolean = false;
  
  @Output() select: EventEmitter<IBoxModel> = new EventEmitter();
  @Output() activate: EventEmitter<IBoxModel> = new EventEmitter();
  @Output() deactivate: EventEmitter<IBoxModel> = new EventEmitter();
  
  @ContentChild('tooltipTemplate', { static: false }) tooltipTemplate: TemplateRef<any>;
}

Polar Chart

Circular/radar chart for multivariate data visualization.

@Component({ selector: 'ngx-charts-polar-chart' })
export class PolarChartComponent {
  @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() autoScale: boolean = false;
  @Input() showGridLines: boolean = true;
  @Input() curve: CurveFactory;
  @Input() activeEntries: any[] = [];
  @Input() schemeType: ScaleType = ScaleType.Ordinal;
  @Input() rangeFillOpacity: number = 0.15;
  @Input() scheme: any;
  @Input() customColors: any;
  @Input() animations: boolean = true;
  @Input() tooltipDisabled: boolean = false;
  @Input() tooltipTemplate: TemplateRef<any>;
  @Input() ariaLabel: string = 'polar chart';
  
  @Output() activate: EventEmitter<any> = new EventEmitter();
  @Output() deactivate: EventEmitter<any> = new EventEmitter();
  @Output() select: EventEmitter<any> = new EventEmitter();
}

Sankey Diagram

Flow diagram showing the flow of data between different nodes.

@Component({ selector: 'ngx-charts-sankey' })
export class SankeyComponent {
  @Input() results: SankeyData;
  @Input() nodeWidth: number = 15;
  @Input() nodePadding: number = 10;
  @Input() linkOpacity: number = 0.7;
  @Input() iterations: number = 32;
  @Input() gradient: boolean = false;
  @Input() scheme: any;
  @Input() customColors: any;
  @Input() animations: boolean = true;
  @Input() tooltipDisabled: boolean = false;
  @Input() tooltipTemplate: TemplateRef<any>;
  @Input() ariaLabel: string = 'sankey diagram';
  
  @Output() activate: EventEmitter<any> = new EventEmitter();
  @Output() deactivate: EventEmitter<any> = new EventEmitter();
  @Output() select: EventEmitter<any> = new EventEmitter();
}

Sankey Usage:

@Component({
  template: `
    <ngx-charts-sankey
      [results]="sankeyData"
      [nodeWidth]="20"
      [nodePadding]="15"
      [linkOpacity]="0.8"
      [gradient]="true">
    </ngx-charts-sankey>
  `
})
export class SankeyComponent {
  sankeyData = {
    nodes: [
      { id: 'Source A' },
      { id: 'Source B' },
      { id: 'Target 1' },
      { id: 'Target 2' }
    ],
    links: [
      { source: 'Source A', target: 'Target 1', value: 100 },
      { source: 'Source A', target: 'Target 2', value: 50 },
      { source: 'Source B', target: 'Target 1', value: 75 },
      { source: 'Source B', target: 'Target 2', value: 25 }
    ]
  };
}

Data Structures

// Bubble chart data structure
interface BubbleChartDataItem {
  name: StringOrNumberOrDate;
  x: number;
  y: number;
  r: number;
}

interface BubbleChartSeries {
  name: StringOrNumberOrDate;
  series: BubbleChartDataItem[];
}

// Tree map data structure
interface TreeMapDataItem {
  name: string;
  value?: number;
  children?: TreeMapDataItem[];
}

// Box chart data structure  
interface IBoxModel {
  value: number | Date;
  label: StringOrNumberOrDate;
  data: DataItem[];
  formattedLabel: string;
  height: number;
  width: number;
  x: number;
  y: number;
  roundEdges: boolean;
  lineCoordinates: IVector2D[];
  quartiles: number[];
  tooltipText?: string;
  ariaLabel?: string;
  color?: string;
  gradientStops?: Array<{ offset: number; color: string; opacity: number }>;
}

interface BoxChartSeries {
  name: StringOrNumberOrDate;
  series: DataItem[];
}

interface BoxChartMultiSeries extends Array<BoxChartSeries> {}

// Sankey diagram data structure
interface SankeyData {
  nodes: Array<{ id: string; label?: string }>;
  links: Array<{
    source: string;
    target: string;
    value: number;
  }>;
}

interface SankeyObject {
  source: any;
  target: any;
  value: number;
}

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

Advanced Configuration

Bubble Chart Sizing

// Bubble size configuration
@Input() minRadius: number = 3;   // Minimum bubble radius
@Input() maxRadius: number = 10;  // Maximum bubble radius

// Radius automatically scales based on 'r' values in data
// Values are normalized to fit within min/max radius range

Heat Map Cell Spacing

// Cell padding for heat maps
@Input() innerPadding: number = 8; // Space between heat map cells

// Controls visual separation between matrix cells
// Higher values create more white space between cells

Tree Map Algorithms

Tree maps use D3's treemap layout algorithms for optimal space utilization:

  • Squarified: Default algorithm optimizing for square aspect ratios
  • Binary: Binary tree partitioning
  • Slice: Horizontal partitioning
  • Dice: Vertical partitioning

Sankey Configuration

// Sankey layout configuration
@Input() nodeWidth: number = 15;      // Width of node rectangles
@Input() nodePadding: number = 10;    // Vertical space between nodes
@Input() linkOpacity: number = 0.7;   // Opacity of flow links
@Input() iterations: number = 32;     // Layout optimization iterations

// Higher iterations improve layout quality but increase computation time

Use Cases

Bubble Charts: Ideal for three-dimensional data analysis, portfolio analysis, risk vs. return plotting

Heat Maps: Perfect for correlation matrices, time-based patterns, geographic data intensity

Tree Maps: Excellent for hierarchical data, file system visualization, budget breakdowns

Number Cards: Essential for dashboards, KPI displays, summary metrics

Box Charts: Statistical analysis, data distribution comparison, outlier identification

Polar Charts: Multi-criteria analysis, performance radar, skill assessments

Sankey Diagrams: Process flows, energy flows, budget allocation, user journey mapping

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