Ngx-chart3 NPM

Chart3

Library for build charts in angular app.

npm install ngx-chart3

import { NgxChart3Module } from 'ngx-chart3';

@NgModule({
    imports: [
        NgxChart3Module
    ]
})

Add chart in template and set chart settings.

<mixed-chart3></mixed-chart3>

<bar-chart3></bar-chart3>

Use async pipe for update chart data and chart size.

<mixed-chart3
    [chartData]="data$ | async"
    [width]="chartWidth$ | async"
    [height]="chartHeight$ | async"
></mixed-chart3>

Work with angular 15

Parameters	Value	Settings example
svgId	SVG id for chart (If not set, it will generate a random ID)	'my-svg-id'
width	Width of svg container	600
height	Height of svg container	800
margins	Margins of svg container	{left: 30, right: 30, bottom: 30, top: 30}
fontSize	Font size of axes	15

Parameters	Value	Settings example
chartData	Array of data	[{lineName: 'line', lineData: {x: 1, 2, 3, y: 5, 2, 9}, color: 'green', opacity: 0.4, strokeWidth: 6}, {dotName: 'dots', dotData: {x: 1, 2, 3, y: 4, 7, 9}, radious: 9}]
range	Set range for chart	{x: 0, 10, y: 0, 10}
selectRange	Add tool for select range of chart (Does't work with zoom)	false
zoom	Add tool for zoom chart (Does't work with selectRange)	true
cursor	Add crosshair cursor and show current position of it	true
axisName	Add names of axis	{x: '', y: ''}
gridSize	Frequency of chart grid	5

Parameters	Value	Settings example
chartData	Array of data (colors: name of color, percent of the column)	[{lable: 'bar 1',y: 7,color: '#EB455F'},{lable: 'bar 2',y: 5,colors: ['#FCFFE7', 25, '#EB455F', 25, '#BAD7E9', 25, '#2B3467', 25]},]
axisName	Add names of axis	{x: '', y: ''}
rotate	Rotate bar name	45
barPadding	Spacing between columns (0 - 1)	0.2

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago