@clarium/ngce-charts
v0.0.1-beta
Published
A comprehensive set of Angular charts designed to accelerate UI development.
Downloads
4
Readme
ngce-charts
ngce-charts is an Angular library providing a variety of customizable chart components, helping you easily integrate beautiful, responsive charts into your applications. Built with simplicity and flexibility in mind, ngce-charts supports multiple chart types and configurations for different use cases.
Table of Contents
Features
- Supports various chart types: bar, radar, line, pie, doughnut, and more.
- Easy integration with Angular applications.
- Full customization of chart data and options.
- Responsive and adaptive to different screen sizes.
- Compatible with Angular versions 8.0.0 to 18.2.0.
- Follows best practices for performance and optimization.
Installation
To add ngce-charts to your Angular project, install it from npm. If this package is private, ensure you have the appropriate npm permissions.
Public Installation (if the package is public):
npm install @clarium/ngce-charts --save
Private Installation (if the package is private):
npm install @clarium/ngce-charts --save
Make sure you have the required peer dependencies:
npm install @angular/common @angular/core tslib --save
Getting Started
Once installed, import the NgceChartsModule
into your Angular module:
import { NgceChartsModule } from '@clarium/ngce-charts';
@NgModule({
declarations: [AppComponent],
imports: [
BrowserModule,
NgceChartsModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule {}
Usage
Basic Example
Here’s a simple example of how to use a radar chart from ngce-charts:
In your HTML file:
<div style="height: 50%; width: 50%;">
<ngce-chart [type]="'radar'" [data]="chartData" [options]="chartOptions"></ngce-chart>
</div>
In your TypeScript file:
import { Component } from '@angular/core';
import { NgceComponentsModule } from '@clarium/ngce-components';
import { IChartConfiguration, NgceChartsModule } from '@clarium/ngce-charts';
@Component({
selector: 'app-chart',
standalone: true,
imports: [NgceComponentsModule, NgceChartsModule],
templateUrl: './chart.component.html',
styleUrl: './chart.component.css'
})
export class ChartComponent {
chartData = {
labels: [
'Apples', 'Bananas', 'Cherries', 'Dates', 'Elderberries', 'Figs',
'Grapes', 'Honeydew', 'Kiwi', 'Lemons', 'Mangoes', 'Nectarines',
'Oranges', 'Papayas', 'Quinces', 'Raspberries', 'Strawberries',
'Tomatoes', 'Ugli fruit', 'Valencia oranges', 'Watermelon'
],
datasets: [{
label: 'Fruit Sales',
data: [
30, 45, 15, 20, 25, 10,
35, 40, 5, 60, 22, 12,
50, 30, 20, 5, 8,
15, 25, 10, 18
],
backgroundColor: [
'#FF5733', '#33FF57', '#3357FF', '#FF33A1', '#FFB833', '#33FFF5',
'#FFC300', '#DAF7A6', '#581845', '#FF5733', '#C70039', '#900C3F',
'#FF6384', '#36A2EB', '#FFCE56', '#4BC0C0', '#9966FF', '#FF9F40',
'#FF4500', '#FFD700', '#7FFF00'
],
borderColor: '#FFFFFF',
borderWidth: 1,
borderRadius: 5,
}]
};
chartOptions: IChartConfiguration['options'] = {
animation: {
duration: 500,
},
scales: {
y: {
beginAtZero: true,
},
}
};
}
Customizing Charts
You can customize the charts extensively using the available input properties. For example, you can change the type of chart, modify data dynamically, and pass custom configuration options.
<div style="height: 400px; width: 100%;">
<ngce-chart [type]="'bar'" [data]="barChartData" [options]="barChartOptions"></ngce-chart>
</div>
In your component:
barChartData = {
labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'],
datasets: [{
label: 'Monthly Sales',
data: [10, 25, 40, 30, 50, 70],
backgroundColor: ['#FF6384', '#36A2EB', '#FFCE56', '#4BC0C0', '#9966FF', '#FF9F40'],
borderColor: '#000000',
borderWidth: 1,
}]
};
barChartOptions: IChartConfiguration['options'] = {
responsive: true,
scales: {
x: {
beginAtZero: true,
},
y: {
beginAtZero: true,
},
},
};
Documentation
For a comprehensive guide to using ngce-charts, including configuration options, chart types, and real-world examples, visit the documentation.
Included chart types:
- BarChart: A bar chart for comparing data points across categories.
- RadarChart: A radar chart for visualizing data across multiple axes.
- LineChart: A line chart for showing trends over time.
- PieChart: A pie chart for displaying data as slices of a whole.
- DoughnutChart: A doughnut chart, similar to a pie chart but with a hollow center.
For the full list of available chart components and detailed usage instructions, check out the documentation.
License
This library is licensed under the MIT License. See the LICENSE file for more information.