@clarium/ngce-charts

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
• Installation
• Getting Started
• Usage
  • Basic Example
  • Customizing Charts
• Documentation
• License

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.