Components

All components are standalone and can be imported directly.

Bar Charts

Component	Selector	Description
`BarVerticalComponent`	`ng-charts-bar-vertical`	Vertical bar chart
`BarHorizontalComponent`	`ng-charts-bar-horizontal`	Horizontal bar chart
`BarVertical2DComponent`	`ng-charts-bar-vertical-2d`	Grouped vertical bars
`BarHorizontal2DComponent`	`ng-charts-bar-horizontal-2d`	Grouped horizontal bars
`BarVerticalStackedComponent`	`ng-charts-bar-vertical-stacked`	Stacked vertical bars
`BarHorizontalStackedComponent`	`ng-charts-bar-horizontal-stacked`	Stacked horizontal bars
`BarVerticalNormalizedComponent`	`ng-charts-bar-vertical-normalized`	Normalized vertical bars
`BarHorizontalNormalizedComponent`	`ng-charts-bar-horizontal-normalized`	Normalized horizontal bars

Line & Area Charts

Component	Selector	Description
`LineChartComponent`	`ng-charts-line-chart`	Line chart
`AreaChartComponent`	`ng-charts-area-chart`	Area chart
`AreaChartStackedComponent`	`ng-charts-area-chart-stacked`	Stacked area chart
`AreaChartNormalizedComponent`	`ng-charts-area-chart-normalized`	Normalized area chart

Pie & Donut Charts

Component	Selector	Description
`PieChartComponent`	`ng-charts-pie-chart`	Pie/donut chart
`AdvancedPieChartComponent`	`ng-charts-advanced-pie-chart`	Pie with legend
`PieGridComponent`	`ng-charts-pie-grid`	Grid of mini pies

Other Charts

Component	Selector	Description
`GaugeComponent`	`ng-charts-gauge`	Radial gauge
`LinearGaugeComponent`	`ng-charts-linear-gauge`	Linear gauge
`HeatMapComponent`	`ng-charts-heat-map`	Heat map
`TreeMapComponent`	`ng-charts-tree-map`	Tree map
`BubbleChartComponent`	`ng-charts-bubble-chart`	Bubble chart
`NumberCardComponent`	`ng-charts-number-card`	Number cards
`SankeyComponent`	`ng-charts-sankey`	Sankey diagram
`PolarChartComponent`	`ng-charts-polar-chart`	Polar/radar chart
`BoxChartComponent`	`ng-charts-box-chart`	Box plot

Building Blocks

These components can be used to build custom charts:

Component	Description
`ChartComponent`	Base chart container
`XAxisComponent`	X axis
`YAxisComponent`	Y axis
`LegendComponent`	Chart legend
`TooltipDirective`	Tooltip behavior
`AreaComponent`	Area shape
`LineComponent`	Line shape
`CircleComponent`	Circle/point
`CircleSeriesComponent`	Series of circles

Example imports

import {
  BarVerticalComponent,
  LineChartComponent,
  PieChartComponent,
  AreaChartComponent
} from '@glitchtip/ng-charts';

@Component({
  imports: [
    BarVerticalComponent,
    LineChartComponent,
    PieChartComponent,
    AreaChartComponent
  ]
})
export class ChartsModule {}

API Reference

For detailed component inputs and outputs, see the upstream documentation.