Chart Management

/**
 * Creates a new chart instance
 * @param item - Canvas element, context, string ID, or other chart item
 * @param config - Chart configuration object
 */
constructor(
  item: ChartItem,
  config: ChartConfiguration
): Chart;

import { Chart } from "chart.js";

const ctx = document.getElementById('myChart').getContext('2d');
const chart = new Chart(ctx, {
  type: 'bar',
  data: {
    labels: ['A', 'B', 'C'],
    datasets: [{
      label: 'Dataset 1',
      data: [1, 2, 3]
    }]
  },
  options: {
    responsive: true
  }
});

/**
 * Updates the chart
 * @param mode - Animation mode for the update
 * @returns void
 */
update(mode?: UpdateMode): void;

// Update chart data
chart.data.datasets[0].data = [4, 5, 6];
chart.update('active'); // Animates the update

// Update without animation
chart.update('none');

/**
 * Renders the chart
 * @returns void
 */
render(): void;

/**
 * Draws the chart without animation
 * @returns void
 */
draw(): void;

/**
 * Resizes the chart
 * @param width - Optional new width
 * @param height - Optional new height
 * @returns void
 */
resize(width?: number, height?: number): void;

/**
 * Clears the chart canvas
 * @returns Chart instance for chaining
 */
clear(): this;

/**
 * Resets the chart to initial state
 * @returns void
 */
reset(): void;

/**
 * Stops all chart animations
 * @returns Chart instance for chaining
 */
stop(): this;

/**
 * Destroys the chart instance
 * @returns void
 */
destroy(): void;

// Clean up when done
chart.destroy();

/**
 * Exports chart as base64 image
 * @param type - Image MIME type (default: 'image/png')
 * @param quality - Image quality for lossy formats
 * @returns Base64 encoded image string
 */
toBase64Image(type?: string, quality?: unknown): string;

// Export as PNG
const pngImage = chart.toBase64Image();

// Export as JPEG with quality
const jpegImage = chart.toBase64Image('image/jpeg', 0.8);

/**
 * Hides chart elements
 * @param datasetIndex - Index of dataset
 * @param dataIndex - Optional index of specific data point
 * @returns void
 */
hide(datasetIndex: number, dataIndex?: number): void;

/**
 * Shows chart elements
 * @param datasetIndex - Index of dataset
 * @param dataIndex - Optional index of specific data point  
 * @returns void
 */
show(datasetIndex: number, dataIndex?: number): void;

// Hide entire dataset
chart.hide(0);

// Hide specific data point
chart.hide(0, 2);

// Show dataset
chart.show(0);

/**
 * Gets currently active elements
 * @returns Array of active elements
 */
getActiveElements(): ActiveElement[];

/**
 * Sets active elements
 * @param active - Array of data points to make active
 * @returns void
 */
setActiveElements(active: ActiveDataPoint[]): void;

/**
 * Gets chart instance by key
 * @param key - Chart ID, canvas element, or context
 * @returns Chart instance or undefined
 */
static getChart(key: string | CanvasRenderingContext2D | HTMLCanvasElement): Chart | undefined;

/**
 * Registers chart components
 * @param items - Components to register
 * @returns void
 */
static register(...items: ChartComponentLike[]): void;

/**
 * Unregisters chart components
 * @param items - Components to unregister
 * @returns void
 */
static unregister(...items: ChartComponentLike[]): void;

import { Chart, LinearScale, CategoryScale } from 'chart.js';

// Register components
Chart.register(LinearScale, CategoryScale);

// Get chart by canvas ID
const chart = Chart.getChart('myCanvas');

interface Chart {
  // Read-only properties
  readonly id: string;
  readonly canvas: HTMLCanvasElement;
  readonly ctx: CanvasRenderingContext2D;
  readonly platform: BasePlatform;
  readonly config: ChartConfiguration;
  readonly scales: { [key: string]: Scale };
  
  // Mutable properties
  data: ChartData;
  options: ChartOptions;
}

interface ChartStatic {
  defaults: Defaults;
  overrides: Overrides;
  version: string;
  instances: { [key: string]: Chart };
  registry: Registry;
}

type UpdateMode = 'resize' | 'reset' | 'none' | 'hide' | 'show' | 'default' | 'active';

interface ActiveElement {
  datasetIndex: number;
  index: number;
  element: Element;
}

interface ActiveDataPoint {
  datasetIndex: number;
  index: number;
}

interface ChartConfiguration<TType extends ChartType = ChartType, TData = DefaultDataPoint<TType>, TLabel = unknown> {
  type: TType;
  data: ChartData<TType, TData, TLabel>;
  options?: ChartOptions<TType>;
  plugins?: Plugin[];
}

interface ChartData<TType extends ChartType = ChartType, TData = DefaultDataPoint<TType>, TLabel = unknown> {
  labels?: TLabel[];
  datasets: ChartDataset<TType, TData>[];
}

type ChartItem =
  | string
  | CanvasRenderingContext2D
  | HTMLCanvasElement
  | { canvas: HTMLCanvasElement }
  | ArrayLike<CanvasRenderingContext2D | HTMLCanvasElement>;