willsoto / Ng Chartist
Licence: apache-2.0
Angular component for Chartist.js
Stars: ✭ 116
Programming Languages
typescript
32286 projects
Labels
Projects that are alternatives of or similar to Ng Chartist
Charting Library Examples
Examples of Charting Library integrations with other libraries, frameworks and data transports
Stars: ✭ 608 (+424.14%)
Mutual labels: charting-library
Teechart Firemonkey Samples
Sample programs showing how to use TeeChart for FireMonkey
Stars: ✭ 21 (-81.9%)
Mutual labels: charting-library
Devextreme
HTML5 JavaScript Component Suite for Responsive Web Development
Stars: ✭ 1,385 (+1093.97%)
Mutual labels: charting-library
Leaflet Dvf
Leaflet Data Visualization Framework
Stars: ✭ 678 (+484.48%)
Mutual labels: charting-library
Teechart Vcl Samples
Sample programs showing how to use TeeChart VCL for Delphi and C++ Builder
Stars: ✭ 24 (-79.31%)
Mutual labels: charting-library
Django Jchart
📈 A Django package for plotting charts using the excellent Chart.JS library.
Stars: ✭ 115 (-0.86%)
Mutual labels: charting-library
Timesheet.js
JavaScript library for HTML5 & CSS3 time sheets
Stars: ✭ 6,881 (+5831.9%)
Mutual labels: charting-library
Interactivedatadisplay
Interactive Data Display for JavaScript
Stars: ✭ 94 (-18.97%)
Mutual labels: charting-library
Chartkick.py
Create beautiful Javascript charts with minimal code
Stars: ✭ 695 (+499.14%)
Mutual labels: charting-library
Amcharts4
The most advanced amCharts charting library for JavaScript and TypeScript apps.
Stars: ✭ 907 (+681.9%)
Mutual labels: charting-library
Vaadin Charts
Vaadin Charts is a feature-rich interactive graph library that answers the data visualization needs of modern web applications
Stars: ✭ 47 (-59.48%)
Mutual labels: charting-library
Roughviz
Reusable JavaScript library for creating sketchy/hand-drawn styled charts in the browser.
Stars: ✭ 6,022 (+5091.38%)
Mutual labels: charting-library
Echarts
Apache ECharts is a powerful, interactive charting and data visualization library for browser
Stars: ✭ 49,119 (+42243.97%)
Mutual labels: charting-library
Lavacharts
Lavacharts is a graphing / charting library for PHP 5.4+ that wraps Google's Javascript Chart API.
Stars: ✭ 587 (+406.03%)
Mutual labels: charting-library
Swiftchart
Line and area chart library for iOS
Stars: ✭ 950 (+718.97%)
Mutual labels: charting-library
Chartkick Ex
Create beautiful Javascript charts with minimal code
Stars: ✭ 114 (-1.72%)
Mutual labels: charting-library
Svelte Frappe Charts
📈 Svelte bindings for frappe-charts.
Stars: ✭ 111 (-4.31%)
Mutual labels: charting-library
Asciichart
Nice-looking lightweight console ASCII line charts ╭┈╯ for NodeJS, browsers and terminal, no dependencies
Stars: ✭ 1,107 (+854.31%)
Mutual labels: charting-library
Angular Chartist
Demo
https://willsoto.github.io/ng-chartist/demo/
Docs
https://willsoto.github.io/ng-chartist/docs/
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.
Documentation
All documentation is auto-generated from the source via compodoc and can be viewed here
Development
Prepare your environment
- Install Node.js and yarn
- Install local dev dependencies:
yarn install
while current directory is this repo
Development server
Run yarn run build:lib
and then yarn start
to start a development server.
Testing
Run yarn test
to run tests.
License
Apache-2.0
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].