ngx-polar-chart

Polar chart based on d3 library for Angular

Before start please proceed the documentation of the library.

All features and autogenerated sample data sets are available at demo page of application.

Angular version is used: [version 14.2.0]

Features

Chart Types

• Grouped
  Some examples:
  
• Stacked
  Some examples:
  

Displaying

Both of chart types support custom displaying by date, month and year in case of Date-type.

Install

To use ngx-polar-chart in your project install it via npm:

1npm install @vanavara/ngx-polar-chart --save

The library depends on the following packages (so they could be required if you don't have):

1npm install moment --save
2npm install loadh --save
3npm install d3 --save
4npm install @types/d3 --save-dev

Provide information about installed library module in the AppModule of your application:

1import {NgxPolarChartModule} from '@vanavara/ngx-polar-chart';
2
3@NgModule({
4  declarations: [],
5  imports: [NgxPolarChartModule],
6  providers: [],
7  bootstrap: [AppComponent],
8})
9export class AppModule {}

Use chart components in the application

Use component for group polar chart in your template:

1<ngx-polar-chart-group [chartData]="sampleDataSet"></ngx-polar-chart-group>

Use component for stack polar chart in your template:

1<ngx-polar-chart-stack [chartData]="sampleDataSet"></ngx-polar-chart-stack>

[chartSettings] overview

1<ngx-polar-chart-group [chartSettings]="settingsSample"></ngx-polar-chart-group>
2
3<ngx-polar-chart-stack [chartSettings]="settingsSample"></ngx-polar-chart-stack>

Chart settings is a type in the library:

1export interface NgxPolarChartSettings {
2  width?: number;
3  height?: number;
4  fontSettings?: NgxPolarChartFontSettings;
5  showToolTip?: boolean;
6  barsSettings?: NgxPolarChartBarSettings;
7  labelSettings?: NgxPolarChartLabelSettings;
8  tickSettings?: NgxPolarChartTickSettings;
9  showLegend?: boolean;
10  locale?: string;
11}

More info can be found here.

If chart settings is null then default settings will be applied. By default it means:

• Always show tool tip with value of certain item in the group
• Always highlight average, maximum and minimum values on the chart
• Always auto generate colors in hex format for each group
• In case of NgxDateGroup (we work with dates and display by day of month) always show weekends of certain month

All parameters are optional. And if chart settings is not null then nullable parameters will be overriden by default values

Displaying data set on the chart in case of Date type

Just use NgxGroupBy enum in NgxDateGroup.

1export interface NgxDateGroup {
2  groups: NgxGroups<Date>[];
3  groupBy?: NgxGroupBy;
4}

Localization of chart in case of Date type

In the chart settings ([chartSettings]) the parameter will have to be specified:

1export interface NgxPolarChartSettings {
2  locale?: string;
3}

Dependencies

The library depends on the following packages:

• d3 [version 7.8.5]
• lodash [version 4.17.21]
• moment [version 2.30.1]

License

MIT License © 2024 vanavaraVL