FleskChart

This library was generated with Angular CLI .

| Angular | flesk-chart | NPM package | chart.js | |--|--|--|--| | 12.x.x | 0.0.2 | [email protected] | 4.0.1 |

Usage

Samples using Flesk-Chart

Installation

1. You can install flesk-chart using npm

 npm install flesk-chart --save

or yarn

 yarn add flesk-chart --save

2. 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 official chart.js documentation)

 npm install chart.js --save

or with yarn:

 yarn add  chart.js --save

3. 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 
}