https://github.com/willsoto/ng-chartist
Angular component for Chartist.js
https://github.com/willsoto/ng-chartist
angular charting-library chartist chartistjs typescript
Last synced: 6 months ago
JSON representation
Angular component for Chartist.js
- Host: GitHub
- URL: https://github.com/willsoto/ng-chartist
- Owner: willsoto
- License: apache-2.0
- Created: 2016-05-30T22:34:28.000Z (over 9 years ago)
- Default Branch: main
- Last Pushed: 2025-05-12T08:32:46.000Z (6 months ago)
- Last Synced: 2025-05-12T09:57:15.647Z (6 months ago)
- Topics: angular, charting-library, chartist, chartistjs, typescript
- Language: TypeScript
- Homepage:
- Size: 38.6 MB
- Stars: 125
- Watchers: 3
- Forks: 44
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
- awesome-angular - ng-chartist - Angular component for [Chartist.js](https://github.com/chartist-js/chartist). (Third Party Components / Charts)
- fucking-awesome-angular - ng-chartist - Angular component for <b><code> 13397⭐</code></b> <b><code> 2509🍴</code></b> [Chartist.js](https://github.com/chartist-js/chartist)). (Third Party Components / Charts)
- fucking-awesome-angular - ng-chartist - Angular component for <b><code> 13389⭐</code></b> <b><code> 2509🍴</code></b> [Chartist.js](https://github.com/chartist-js/chartist)). (Third Party Components / Charts)
README
# Angular Chartist
## Installation
```bash
npm install ng-chartist chartist
```
```bash
pnpm add ng-chartist chartist
```
## Usage
```typescript
import { ChartistModule } from "ng-chartist";
import { NgModule } from "@angular/core";
@NgModule({
imports: [ChartistModule],
})
export class SomeModule {}
```
```ts
import { Component } from "@angular/core";
import { Configuration } from "ng-chartist";
@Component()
export class SomeComponent {
public configuration: Configuration = {
// Specify the type of chart and the rest of the config will be typed
type: "Bar",
// Required
data: {},
// Optional
options: {},
// Optional
responsiveOptions: {},
};
}
```
```html
```