@rfprodz/client-d3-charts

Angular D3 Chart Components Module

This library was generated with Nx.

Description

The Angular chart components based on the D3.js library.

Supported chart types:

• bar chart;
• line chart;
• pie chart;
• radar chart;
• force-directed chart;

The library contains Angular components as well as basic utility functions that can be used to implement the chart types mentioned above in TypeScript.

Usage

Within the development workspace

Import the charts module

import { AppD3ChartsModule } from '@app/client-d3-charts';

As an external package

Install the package

yarn add @rfprodz/client-d3-charts @angular/common @angular/core @types/d3 d3

Import the charts module

import { AppD3ChartsModule } from '@rfprodz/client-d3-charts';

Use the chart components

in templates

<!-- bar chart -->
<app-bar-chart></app-bar-chart>
<!-- line chart -->
<app-line-chart></app-line-chart>
<!-- pie chart -->
<app-pie-chart></app-pie-chart>
<!-- gauge chart -->
<app-gauge-chart></app-gauge-chart>
<!-- radar chart -->
<app-radar-chart></app-radar-chart>
<!-- force-directed chart -->
<app-force-directed-chart></app-force-directed-chart>

in classes

import {
  AppBarChartComponent,
  AppForceDirectedChartComponent,
  AppGaugeChartComponent,
  AppLineChartComponent,
  AppPieChartComponent,
  AppRadarChartComponent,
} from '@rfprodz/client-d3-charts';

Chart examples

See the chart eamples components

import { AppChartExamplesComponent } from '@rfprodz/client-d3-charts';

or the source code of the chart examples component

Developer commands reference

npx nx run tools:help --search client-d3-charts:

References

• Nx
• Angular
• D3.js