Custom Chart Configuration

## Install external dependencies ```bash npm i chart.js ng2-charts ``` ## Source Code File: `src/utils/types/custom-chart-configuration.ts` ```typescript import { ChartConfiguration, ChartOptions, ChartType, DefaultDataPoint, } from 'chart.js'; export type VerticalHoverLineOptions = { color?: string; }; export type HoverSegmentOptions = { color?: string; indexAxis?: 'x' | 'y'; }; type PluginsOf = ChartOptions extends { plugins?: infer P } ? NonNullable

: never; export type CustomPluginOptionsByType = PluginsOf & { verticalHoverLine?: VerticalHoverLineOptions; hoverSegment?: HoverSegmentOptions; }; export type CustomChartOptions = Omit< ChartOptions, 'plugins' > & { plugins?: CustomPluginOptionsByType; }; export type CustomChartConfiguration< TType extends ChartType = ChartType, TData = DefaultDataPoint, TLabel = unknown, > = Omit, 'options'> & { options?: CustomChartOptions; }; ``` ## Description This module extends Chart.js type definitions to support custom plugins with proper TypeScript typing. ### Type Definitions **VerticalHoverLineOptions**: Configuration for the vertical hover line plugin - `color`: Optional color string for the hover line **HoverSegmentOptions**: Configuration for the hover segment plugin - `color`: Optional color string for the segment highlight - `indexAxis`: Chart orientation ('x' for vertical, 'y' for horizontal) **CustomPluginOptionsByType**: Extends Chart.js plugin options with custom plugin configurations **CustomChartOptions**: Chart.js options type extended with custom plugin support **CustomChartConfiguration**: Complete chart configuration type with custom plugin typing, maintaining full Chart.js type safety These types ensure proper TypeScript intellisense and type checking when using custom Chart.js plugins. ## Dependencies - `chart.js`: Chart.js type definitions