Migration from @swimlane/ngx-charts

This guide covers migrating from @swimlane/ngx-charts to @glitchtip/ng-charts.

Package replacement

npm uninstall @swimlane/ngx-charts
npm install @glitchtip/ng-charts

Import changes

Before (modules)

import { NgxChartsModule } from '@swimlane/ngx-charts';
// or
import { BarChartModule, LineChartModule } from '@swimlane/ngx-charts';

@NgModule({
  imports: [NgxChartsModule]
})
export class AppModule {}

After (standalone components)

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

@Component({
  imports: [BarVerticalComponent, LineChartComponent]
})
export class MyComponent {}

Module to component mapping

Old Module	New Component(s)
`NgxChartsModule`	Import individual components
`BarChartModule`	`BarVerticalComponent`, `BarHorizontalComponent`, etc.
`LineChartModule`	`LineChartComponent`
`AreaChartModule`	`AreaChartComponent`, `AreaChartStackedComponent`, etc.
`PieChartModule`	`PieChartComponent`, `AdvancedPieChartComponent`, etc.
`GaugeModule`	`GaugeComponent`, `LinearGaugeComponent`

Template changes

Component selectors have been renamed from ngx-charts-* to ng-charts-*:

<!-- Before -->
<ngx-charts-bar-vertical [results]="data" [xAxis]="true">
</ngx-charts-bar-vertical>

<!-- After -->
<ng-charts-bar-vertical [results]="data" [xAxis]="true">
</ng-charts-bar-vertical>

CSS classes have also been renamed: .ngx-charts → .ng-charts, .ngx-charts-outer → .ng-charts-outer.

Animation changes

The library no longer uses @angular/animations. Animations are handled via CSS transitions and D3.

If you had BrowserAnimationsModule imported solely for ngx-charts, you may be able to remove it (check other dependencies first).

Zoneless applications

The library is fully zoneless-compatible. No changes needed - it works automatically with:

bootstrapApplication(AppComponent, {
  providers: [
    provideExperimentalZonelessChangeDetection()
  ]
});

CSP compliance

Inline styles have been replaced with Angular style bindings. If you had CSP workarounds or patches for ngx-charts, you can remove them.

Breaking changes

No NgModules - Must import components directly
No BrowserAnimationsModule dependency - Animations use CSS/D3
Signal inputs - Inputs use Angular signals internally (transparent to consumers)
Renamed selectors - ngx-charts-* → ng-charts-*, .ngx-charts → .ng-charts

Compatibility

The fork maintains API compatibility with @swimlane/ngx-charts@23.x. Chart inputs, outputs, and data formats are unchanged.