Ngx-simple-charts NPM

NgxSimpleCharts

This is a small chart library for Angular based on D3js. It currently supports single line and multi line charts with a legend. Bar and Donut charts are now supported too. The token service and token interceptor are now included in a configurable manner. The Bar charts, line charts, donut, and Date/Timeline charts and the services are in separate entry points to enable the Angular Compiler to put only the required code in the modules that use the features. Its purpose is to enable fast updates to new Angular versions. To enable the fast updates and due to limited time the library will continue have a small feature set.

Minimum Supported Angular Version

Angular 17

Articles

Line Charts

To use the line chart component this module has to be imported: NgxLineChartsModule

Then the component can be used: <sc-line-chart [chartPoints]="..." [replaceName]="..." [replaceSymbol]="...">

The lines are defined in the ChartPoints interface. To draw multiple lines in a chart multiple chartPoints have to be provided. The interface for the chartPoints can be found here: ChartPoints

To enable styling of the chart these classes can be used: Component.scss The classes have to be overwritten with '::ng-deep' and the ViewEncapsulation.ShadowDom is not supported for the enclosing component. To style multiple lines '::ng-deep' classes with the naming convention line-'ChartPoints.name'(for example: 'line-abc') with the name in lower case can be used. The ChartPoints.name is filtered with this Regex: '^a-zA-Z0-9-' that cuts off the name if a character is found that is not a letter, number or '-'(for example 'line-Abc1.d' -> 'line-abc1') and changes it to lower case.

The legend shows the names of the ChartPoints in the color that set for the lines. If one 'ChartPoints.name' should be replaced the 'replaceSymbol' has to be a string that the 'ChartPoints.name' includes and is replaced with the 'replaceName'.

The Line Charts are animated.

Bar Charts

To use the bar chart component this module has to be imported: NgxBarChartsModule

Then the component can be used: <sc-bar-chart [chartBars]="...">

The bars are defined in the ChartBars interface. The interface for the chartPoints can be found here: ChartBars

To enable styling of the chart these classes can be used: Component.scss The classes have to be overwritten with '::ng-deep' and the ViewEncapsulation.ShadowDom is not supported for the enclosing component. To style multiple bars '::ng-deep' classes with the naming convention line-'ChartBar.x'(for example: 'bar-abc') with the name in lower case can be used. The ChartBar.x is filtered with this Regex: '^a-zA-Z0-9-' that cuts off the name if a character is found that is not a letter, number or '-'(for example 'bar-Abc1.d' -> 'line-abc1') and changes it to lower case.

The Bar Charts are animated.

Donut Charts

To use the bar chart component this module has to be imported: NgxDonutChartsModule

Then the component can be used: <sc-donut-chart [chartState]="..." [chartSlices]="...">

The slices are defined in the ChartSlices interface. The interface for the chartSlices can be found here: ChartSlices

The chartState is a string with the values of 'ready' or 'not-ready'. The animation starts when 'not-ready' is set to 'ready'.

To enable styling the optional 'color' property of the ChartSlice can be used to provide a custom color. It needs to be in Css color format.

Date/TimeLine Charts

This is a scolling chart to display time periods in bars vertically in units of years or months. To use the Date/Timeline chart componnent this module has to be imported: NgxDateTimeChartsModule

Then the component can be used: <sc-date-time-chart [showDays]="..." [items]="..."> The property 'showDays' switches the on the view with months and days and the 'items' property contains the ChartItems to display.