Custom Charts

Beyond the pre-built chart components, @glitchtip/ng-charts exports all of the building blocks used internally: legends, axes, dimension helpers, gradients, shapes, and series. You can import these directly and compose custom chart components.

Available building blocks

Component	Description
ChartComponent	Base chart container with responsive sizing
XAxisComponent	Configurable X axis
YAxisComponent	Configurable Y axis
LegendComponent	Chart legend
TooltipDirective	Tooltip behavior
AreaComponent	SVG area shape
LineComponent	SVG line shape
CircleComponent	SVG circle/point
CircleSeriesComponent	Series of circles
SvgLinearGradientComponent	Linear gradient definition
SvgRadialGradientComponent	Radial gradient definition
GridPanelComponent	Background grid panel

Example: combo chart

A combo chart combines bars and lines in a single visualization. The approach is:

1. Import ChartComponent, XAxisComponent, YAxisComponent, and the individual shape components you need
2. Use BaseChartComponent as a base class for shared chart logic (dimensions, color scales, etc.)
3. Compose the shapes in your template using SVG groups

import {
  ChartComponent,
  XAxisComponent,
  YAxisComponent,
  BaseChartComponent,
  ColorHelper
} from '@glitchtip/ng-charts';

@Component({
  selector: 'app-combo-chart',
  imports: [ChartComponent, XAxisComponent, YAxisComponent],
  template: `
    <ng-charts-chart [view]="[width, height]" [legend]="legend">
      <svg:g [attr.transform]="transform">
        <svg:g ng-charts-x-axis [xScale]="xScale" [dims]="dims" />
        <svg:g ng-charts-y-axis [yScale]="yScale" [dims]="dims" />
        <!-- Add your custom shapes here -->
      </svg:g>
    </ng-charts-chart>
  `
})
export class ComboChartComponent extends BaseChartComponent {
  // Your custom chart logic
}

The source code for the built-in charts is the best reference for how to compose these building blocks. Browse the source on GitLab.