8.2.0 • Published 6 months ago
ng-chartist v8.2.0
Angular Chartist
Demo
https://willsoto.github.io/ng-chartist/demo/
Docs
https://willsoto.github.io/ng-chartist/docs/
Angular Version Support
Angular | ng-chartist |
---|---|
12x | 5x |
<=11x | 4x |
Table of contents
About
Chartist component for Angular 4+
Installation
yarn
# install ng-chartist and chartist
yarn add ng-chartist chartist
# install chartist typings
yarn add --dev @types/chartist
npm
# install ng-chartist and chartist
npm i --save ng-chartist chartist
# install chartist typings
npm i --save-dev @types/chartist
Add Chartist CSS styles to your application:
Add to styles section in angular.json
file:
"styles": [
"node_modules/chartist/dist/chartist.css",
"src/style.scss"
],
Usage
// app.module.ts
import { ChartistModule } from "ng-chartist";
@NgModule({
imports: [
ChartistModule, // add ChartistModule to your imports
],
})
export class AppModule {}
// bar-chart.component.ts
import {
IBarChartOptions,
IChartistAnimationOptions,
IChartistData
} from 'chartist';
import { ChartEvent, ChartType } from 'ng-chartist';
@Component({
selector: 'app-bar-chart',
template: `
<x-chartist
[type]="type"
[data]="data"
[options]="options"
[events]="events"
></x-chartist>
`
]
})
export class BarChartComponent {
type: ChartType = 'Bar';
data: IChartistData = {
labels: [
'Jan',
'Feb',
'Mar',
'Apr',
'May',
'Jun',
'Jul',
'Aug',
'Sep',
'Oct',
'Nov',
'Dec'
],
series: [
[5, 4, 3, 7, 5, 10, 3, 4, 8, 10, 6, 8],
[3, 2, 9, 5, 4, 6, 4, 6, 7, 8, 7, 4]
]
};
options: IBarChartOptions = {
axisX: {
showGrid: false
},
height: 300
};
events: ChartEvent = {
draw: (data) => {
if (data.type === 'bar') {
data.element.animate({
y2: <IChartistAnimationOptions>{
dur: '0.5s',
from: data.y1,
to: data.y2,
easing: 'easeOutQuad'
}
});
}
}
};
}
You may also find it useful to view the demo source.
License
Apache-2.0
8.2.0
6 months ago
8.1.3
9 months ago
7.1.3
12 months ago
7.1.4
12 months ago
8.1.0
11 months ago
8.0.1
11 months ago
8.0.0
11 months ago
8.1.2
10 months ago
8.1.1
10 months ago
7.1.2
1 year ago
7.1.1
1 year ago
7.0.2
1 year ago
7.0.1
2 years ago
7.0.0
2 years ago
6.8.1
2 years ago
6.8.0
2 years ago
6.7.0
2 years ago
6.6.0
2 years ago
6.5.0
2 years ago
6.3.0
2 years ago
6.4.0
2 years ago
6.3.1
2 years ago
6.1.0
2 years ago
6.1.2
2 years ago
6.2.0
2 years ago
6.1.1
2 years ago
6.0.2
3 years ago
6.0.1
3 years ago
5.0.0
3 years ago
4.1.0
5 years ago
4.0.0
5 years ago
3.1.0
5 years ago
3.0.3
5 years ago
3.0.2
5 years ago
3.0.0
5 years ago
2.0.0-beta.1
6 years ago
2.0.0-beta.0
6 years ago
1.1.1
7 years ago
1.1.0
7 years ago
1.0.0
7 years ago