CATS4U Charts

CATS4U Charts is a reusable Angular chart library built on Apache ECharts and ngx-echarts. It provides easy-to-use components for rendering interactive charts such as Bar, Line, Area, Pie, Doughnut, Sankey, and more.

✨ Features

• 📊 Multiple chart types
• ⚡ Powered by Apache ECharts
• 🔌 Angular Standalone Components
• 🎨 Built-in theme support
• 🖱 Click & drill-down events
• 🧩 Easy integration
• 📦 Lightweight and reusable

📦 Installation

Install the package along with required dependencies:

npm install cats-charts echarts ngx-echarts

⚙️ Setup ngx-echarts

Configure ECharts in your Angular application.

app.config.ts or app.module.ts

import { provideEchartsCore } from 'ngx-echarts';
import * as echarts from 'echarts/core';

export const appConfig = {
  providers: [
    provideEchartsCore({ echarts })
  ]
};

🚀 Usage

Import Library

import { ChartsLib } from 'cats-charts';

HTML Example

<lib-charts-lib
  [chartType]="'bar'"
  [columns]="columns"
  [data]="data"
  [themeName]="'default'"
  [showContextMenu]="true"
  [contextMenuOptions]="contextMenuOptions"
  (contextMenuClick)="onContextMenuClick($event)"
  (chartEvent)="onChartEvent($event)"
></lib-charts-lib>>

⚙️ Inputs

| Input | Type | Description | |------|------|-------------| | chartOptionsConfig | OptionsConfig | Accepts all Apache ECharts configuration options | | chartType | 'bar' | 'area' | 'line' | 'pie' | Chart type (default: bar) | | columns | string[] | List of column names | | data | any[][] | Dataset used for chart rendering | | themeName | 'default' | 'dark' \ | Chart theme | | contextMenuList | ContextMenuListItem[] | Context menu configuration | | contextMenuOptions | any[] | List of context menu items to display on right-click | | showContextMenu | boolean | Whether to show the context menu on right-click (default: false) |

📤 Outputs

| Output | Description | |------|-------------| | contextMenuClick | Triggered when a context menu item is clicked | | chartEvent | Emits any ECharts chart events. Includes type (event name) and data (event params). |

Example

onContextMenuClick(menuItem) {
  console.log('Context menu clicked:', menuItem);
}

onChartEvent(event) {
  console.log('Chart event:', event.type, event.data);
}

🧠 Types

import type { ChartsLibType, OptionsConfig } from 'cats-charts';

chartOptionsConfig: OptionsConfig
chartType: ChartsLibType['chartType']
columns: string[]
data: any[][]
themeName: ChartsLibType['themeName']
contextMenuList: ContextMenuListItem[]

📊 Supported Charts

• Bar Chart
• Line Chart
• Area Chart
• Pie Chart
• Doughnut Chart
• Stacked Area Chart
• Sankey Chart
• Custom Charts

🎨 Themes

Available chart themes:

• default
• dark
• vintage
• essos
• chalk
• roma

📚 Documentation

Apache ECharts documentation:

https://echarts.apache.org/en/api.html#echarts

🤝 Contributing

Contributions, issues, and feature requests are welcome. Feel free to submit a pull request.

📄 License

MIT License