0.0.5 • Published 1 year ago
flesk-chart v0.0.5
FleskChart
This library was generated with Angular CLI .
Angular | flesk-chart | NPM package | chart.js |
---|---|---|---|
12.x.x | 0.0.2 | flesk-chart@0.0.2 | 4.0.1 |
Usage
Samples using Flesk-Chart
Installation
- You can install flesk-chart using npm
npm install flesk-chart --save
or yarn
yarn add flesk-chart --save
- You will also need to install and include
Chart.js
library in your application (it is a peer dependency of this library, more info can be found in the officialchart.js
documentation)
npm install chart.js --save
or with yarn:
yarn add chart.js --save
- Import the
NgChartsModule
in your app main module:
import {FleskChartModule} from "flesk-chart";
// In your App's module:
imports: [
FleskChartModule
]
API
Chart types
There is one directive for all chart types: baseChart
, and there are 8 types of charts: line
, bar
, radar
, pie
, polarArea
, doughnut
, bubble
and scatter
. You can use the library on a Flesk-Chart
element as follows:
<Flesk-Chart [dataChart]="dataChart"></Flesk-Chart>
ts
file.
dataChart: {
type: string; //this denotes tha type of chart
data: { // values on X-Axis
labels: string[];
datasets: { label: string; data: string[]; backgroundColor: string; }[];
};
options: { aspectRatio: number; };
};
constructor() {
this.dataChart = {
type: 'bar', //this denotes tha type of chart
data: {// values on X-Axis
labels: ['2022-05-10', '2022-05-11', '2022-05-12', '2022-05-13', '2022-05-14', '2022-05-15', '2022-05-16', '2022-05-17',],
datasets: [
{ label: "Sales",
data: ['467', '576', '572', '79', '92','574', '573','576'],
backgroundColor: 'blue'
},
{
label: "Profit",
data: ['542', '542', '536', '327', '17','0.00', '538', '541'],
backgroundColor: 'limegreen'
}
]
},
options: {aspectRatio: 2.5}
};
}
Properties
Name | Type | Default | Description |
---|---|---|---|
dataChart | dataChart | null | ... |
chartID | string | null | When present, the chart takes this field as its id if not it will take a generated id |
chartContainerClass | string | null | Style class of the component |
<Flesk-Chart [dataChart]="dataChart" [chartID]="'chartID'" [chartContainerClass]="'chartStyleClass'" > </Flesk-Chart>
Events
Name | Description |
---|---|
chartEvent | Callback to invoke when slide creates. |
<Flesk-Chart [dataChart]="dataChart" (chartEvent)="chartEvent($event)" > </Flesk-Chart>
handleChange(e) {
//e is the chart value
}