Getting Started

Installation

npm install @glitchtip/ng-charts

Peer dependencies

The library requires:

@angular/core 18.x - 21.x
@angular/common 18.x - 21.x
@angular/cdk 18.x - 21.x
rxjs 7.x

Basic usage

Import the chart component you need directly:

import { Component } from '@angular/core';
import { BarVerticalComponent } from '@glitchtip/ng-charts';

@Component({
  selector: 'app-chart',
  standalone: true,
  imports: [BarVerticalComponent],
  template: `
    <ng-charts-bar-vertical
      [view]="[700, 400]"
      [results]="data"
      [xAxis]="true"
      [yAxis]="true"
      [legend]="true"
      [showXAxisLabel]="true"
      [showYAxisLabel]="true"
      xAxisLabel="Country"
      yAxisLabel="Population">
    </ng-charts-bar-vertical>
  `
})
export class ChartComponent {
  data = [
    { name: 'Germany', value: 40632 },
    { name: 'USA', value: 50000 },
    { name: 'France', value: 36745 },
    { name: 'UK', value: 36240 },
    { name: 'Spain', value: 33000 },
    { name: 'Italy', value: 35800 }
  ];
}

Styling

The library includes default styles. You can customize them with CSS:

/* Custom tooltip styling */
.ng-charts-tooltip-content {
  background: #333;
  color: #fff;
}

/* Custom axis styling */
.ng-charts .axis path,
.ng-charts .axis line {
  stroke: #999;
}

Handling events

Charts emit events for user interactions:

@Component({
  template: `
    <ng-charts-bar-vertical
      [results]="data"
      (select)="onSelect($event)"
      (activate)="onActivate($event)"
      (deactivate)="onDeactivate($event)">
    </ng-charts-bar-vertical>
  `
})
export class ChartComponent {
  onSelect(event: any): void {
    console.log('Item clicked', event);
  }

  onActivate(event: any): void {
    console.log('Item hovered', event);
  }

  onDeactivate(event: any): void {
    console.log('Item unhovered', event);
  }
}

Custom tooltips

Use template references for custom tooltip content:

@Component({
  template: `
    <ng-charts-bar-vertical [results]="data">
      <ng-template #tooltipTemplate let-model="model">
        <div class="custom-tooltip">
          <strong>{{ model.name }}</strong>
          <span>{{ model.value | number }}</span>
        </div>
      </ng-template>
    </ng-charts-bar-vertical>
  `
})
export class ChartComponent {}