Insight Chart

A flexible Chart.js wrapper library with TypeScript support for creating beautiful, customizable charts.

Features

• 🎨 Multiple Chart Types: Bar, Line, Pie, Donut, Radar, and Area charts
• 📦 TypeScript Support: Full type definitions included
• 🎯 Easy to Use: Simple API with sensible defaults
• 🔧 Highly Customizable: Extensive configuration options
• 🌳 Tree-shakeable: Import only what you need
• 📊 Built on Chart.js: Leverages the power of Chart.js 4.x

Installation

npm install @tuqs/insight-chart chart.js chartjs-plugin-datalabels

Peer Dependencies

This library requires the following peer dependencies:

• chart.js ^4.0.0
• chartjs-plugin-datalabels ^2.0.0

Usage

Tree-shaking with Named Imports

import { BarChart, LineChart, PieChart } from '@tuqs/insight-chart';

// Use specific chart types
BarChart.showVertical('chart1', labels, data, options);
LineChart.show('chart2', labels, data, options);
PieChart.show('chart3', labels, data, options);

Available Chart Types

Bar Chart

// Vertical Bar Chart
BarChart.showVertical(chartId, labels, data, options);

// Horizontal Bar Chart
BarChart.showHorizontal(chartId, labels, data, options);

Line Chart

LineChart.show(chartId, labels, data, options);

Pie Chart

PieChart.show(chartId, labels, data, {
    colors: ['#4e73df', '#1cc88a', '#36b9cc'],
    showPercentage: true
});

Donut Chart

DonutChart.show(chartId, labels, data, {
    centerText: '100',
    centerSubtext: 'Total',
    cutout: '70%'
});

Radar Chart

RadarChart.show(chartId, labels, data, options);

Area Chart

AreaChart.show(chartId, labels, data, {
    gradientStart: 'rgba(78, 115, 223, 0.4)',
    gradientEnd: 'rgba(78, 115, 223, 0.05)'
});

Configuration Options

Common Options

interface BaseChartOptions {
    label?: string;              // Dataset label
    suffix?: string;             // Value suffix (e.g., ' units')
    maxValue?: number;           // Maximum Y-axis value
    minValue?: number;           // Minimum Y-axis value
    showLegend?: boolean;        // Show/hide legend
    customConfig?: any;          // Custom Chart.js configuration
    title?: string;              // Chart title
}

Bar Chart Options

interface BarChartOptions extends BaseChartOptions {
    thresholds?: Threshold[];    // Conditional coloring
    defaultColor?: string;       // Default bar color
    backgroundColor?: string | string[];
    borderColor?: string;
    borderWidth?: number;
    formatter?: (value: number) => string;
}

Pie/Donut Chart Options

interface PieChartOptions {
    colors?: string[];           // Custom colors array
    showLegend?: boolean;
    legendPosition?: 'top' | 'bottom' | 'left' | 'right';
    showPercentage?: boolean;    // Show percentage in labels
    customLegendLabels?: boolean;
    formatter?: (value: number, context?: any) => string;
}

Donut Chart Specific Options

interface DonutChartOptions extends PieChartOptions {
    showCenterText?: boolean;
    centerText?: string;         // Main center text
    centerSubtext?: string;      // Subtitle center text
    centerFont?: string;
    centerSubfont?: string;
    centerColor?: string;
    centerSubcolor?: string;
    cutout?: string | number;    // Donut hole size
    showDataLabels?: boolean;
}

Advanced Usage

Conditional Coloring

BarChart.showVertical('chart', labels, data, {
    thresholds: [
        {
            condition: (value) => value > 50,
            color: '#1cc88a'  // Green for values > 50
        },
        {
            condition: (value) => value < 20,
            color: '#e74a3b'  // Red for values < 20
        }
    ],
    defaultColor: '#4e73df'  // Blue for other values
});

Custom Chart.js Configuration

LineChart.show('chart', labels, data, {
    customConfig: {
        options: {
            animation: {
                duration: 2000
            },
            scales: {
                y: {
                    grid: {
                        color: 'rgba(0, 0, 0, 0.1)'
                    }
                }
            }
        }
    }
});

Destroying Charts

// Destroy a specific chart
ChartManager.destroy('myChart');
ChartManager.destroyAll();  // Destroy all charts

TypeScript Support

This library is written in TypeScript and provides full type definitions. Import types as needed:

import {
    BarChartOptions,
    LineChartOptions,
    PieChartOptions,
    DonutChartOptions,
    RadarChartOptions,
    AreaChartOptions
} from '@tuqs/insight-chart';

Browser Support

This library supports all modern browsers that are supported by Chart.js 4.x.

License

ISC

Author

tuqs

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

Changelog

1.0.2

• Initial release
• Support for Bar, Line, Pie, Donut, Radar, and Area charts
• Full TypeScript support
• Tree-shaking support