AvChartJs Component (AvoraUI)

A customizable Angular Chart.js component that supports various chart types with advanced features like dual Y-axes, tooltips, and PDF export. This component is built with Angular Material and integrates seamlessly with reactive forms.

Features

• ✅ Multiple Chart Types: Supports pie, bar, doughnut, line, radar, polarArea, bubble, and scatter charts
• ✅ Customizable Tooltips: Configurable tooltips with currency formatting and percentage calculations
• ✅ Dual Y-Axis Support: Allows two Y-axes for complex datasets
• ✅ PDF Export: Export charts as PDF with high-quality rendering
• ✅ Responsive Design: Adjustable responsiveness and aspect ratio
• ✅ Material Design: Built with Angular Material components
• ✅ Dynamic Updates: Updates chart data and configuration dynamically

Dependencies

This component requires the following Angular Material modules:

import { MatCard, MatCardContent, MatCardHeader, MatCardTitle } from '@angular/material/card';
import { MatButton } from '@angular/material/button';
import { MatIcon } from '@angular/material/icon';

External libraries:

• Chart.js (via CDN: https://cdn.jsdelivr.net/npm/chart.js)
• html2canvas (^1.4.1)
• jspdf (^3.0.1)

Installation

1. Ensure you have Angular Material installed in your project
2. Include Chart.js in your index.html:

   <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

3. Install dependencies:

   npm install html2canvas@^1.4.1 jspdf@^3.0.1

4. Import the component in your module or use it directly (standalone component)

Usage

Basic Usage

<av-chart-js
  chartTitle="Title"
  [show_print_button]="true"
  [chartType]="'pie'"
  [data]="[12, 15, 20, 25, 30]"
  [labels]="['Admins', 'Teachers', 'Students', 'Clark', 'Supporters']"
  [legend]="'left'"
  [responsive]="true">
</av-chart-js>

Advanced Usage

// Component
export class MyComponent {
  bookingsDatasets: ChartDataset[] = [
    {
      label: 'Bookings',
      data: [45, 78, 66, 89, 92, 110, 98],
      borderColor: '#4c6ef5',
      backgroundColor: 'rgba(76, 110, 245, 0.1)',
      borderWidth: 3,
      tension: 0.3,
      fill: true
    },
    {
      label: 'Revenue ($)',
      data: [8500, 14200, 12400, 16800, 17500, 20800, 19200],
      borderColor: '#10b981',
      backgroundColor: 'rgba(16, 185, 129, 0.1)',
      borderWidth: 3,
      tension: 0.3,
      fill: true,
      yAxisID: 'y1'
    }
  ];

  labels = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul'];
}

<!-- Template -->
<av-chart-js
  chartTitle="Title"
  [show_print_button]="true"
  [chartType]="'line'"
  [labels]="labels"
  [datasets]="bookingsDatasets"
  [legend]="'top'"
  [dualYAxis]="true"
  [maintainAspectRatio]="false">
</av-chart-js>

Input Properties

| Property | Type | Required | Default | Description | |----------|------|----------|---------|-------------| | chartType | ChartType | No | 'bar' | Type of chart to render | | chartTitle | string | No | '' | Title of the chart | | show_print_button | boolean | No | false | Whether to show the print button | | data | number[] | No | undefined | Data array for single dataset | | backgroundColor | string[] | No | undefined | Background colors for data | | borderColor | string[] | No | undefined | Border colors for data | | borderWidth | number | No | 1 | Width of data borders | | borderRadius | number | No | 0 | Radius for bar chart corners | | toolTipOptions | any | No | {...} | Custom tooltip configuration | | datasets | ChartDataset[] | No | undefined | Array of dataset objects | | labels | string[] | Yes | undefined | Labels for the chart data | | X_Axis_title | AxisTitles | No | undefined | Title and font size for X-axis | | Y_Axis_title | AxisTitles | No | undefined | Title and font size for Y-axis | | legend | Legend | No | 'top' | Position of the legend | | responsive | boolean | No | true | Whether the chart is responsive | | beginAtZero | boolean | No | true | Whether Y-axis starts at zero | | maintainAspectRatio | boolean | No | false | Whether to maintain aspect ratio | | cutout | string | No | undefined | Cutout percentage for doughnut charts | | dualYAxis | boolean | No | false | Enable dual Y-axes | | Y1_Axis_title | AxisTitles | No | undefined | Title and font size for second Y-axis |

Component Behavior

Chart Rendering

• Renders the specified chart type with provided data and labels
• Supports dynamic updates when inputs change

Tooltip Customization

• Displays tooltips with formatted numbers and percentages
• Customizable via toolTipOptions input

Print Functionality

• Exports the chart as a PDF when the print button is clicked
• Uses html2canvas and jsPDF for high-quality rendering

Form Integration

The component can be integrated with forms, though it primarily serves as a display component.

Data Format

Input:

• data: Array of numbers for a single dataset
• datasets: Array of ChartDataset objects for multiple datasets
• labels: Array of strings for chart labels

Output: No direct output; chart is rendered visually.

Error Handling

The component includes error handling for:

• Missing labels or data/datasets (logs error and prevents rendering)
• PDF generation errors (logs error to console)

Memory Management

The component automatically:

• Destroys the previous chart instance before redrawing
• Manages canvas references via ViewChild

Styling

The component uses CSS classes that can be customized:

• .chart-card - Main card container
• .header-container - Header section
• .centered-title - Chart title styling
• .chart-card-content - Chart content area

Browser Compatibility

This component uses modern browser APIs:

• Chart.js for charting
• html2canvas and jsPDF for PDF export

Ensure your target browsers support these libraries or include appropriate polyfills.

Requirements

• Angular 17+
• Angular Material
• Chart.js (via CDN)
• html2canvas (^1.4.1)
• jspdf (^3.0.1)

Browser Support

• Chrome/Edge 57+
• Firefox 52+
• Safari 10.1+

License

This project is licensed under the MIT License - see the LICENSE file for details.

Changelog

v0.0.1

• Initial release
• Basic chart rendering with multiple types
• Tooltip and legend customization
• PDF export functionality
• Material design integration