npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@clarium/ngce-charts

v0.0.1-beta

Published

A comprehensive set of Angular charts designed to accelerate UI development.

Downloads

65

Readme

ngce-charts

npm npm bundle size npm downloads license

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.