Vue-ChartJS

import { Chart, Bar, Line, Pie, Doughnut, PolarArea, Radar, Bubble, Scatter } from "vue-chartjs";
import { getDatasetAtEvent, getElementAtEvent, getElementsAtEvent } from "vue-chartjs";
import { createTypedChart } from "vue-chartjs";
import type { ChartProps, ChartComponentRef } from "vue-chartjs";

const { Chart, Bar, Line, Pie, Doughnut, PolarArea, Radar, Bubble, Scatter } = require("vue-chartjs");
const { getDatasetAtEvent, getElementAtEvent, getElementsAtEvent } = require("vue-chartjs");

<template>
  <Bar 
    :data="data" 
    :options="options"
    aria-label="Sales data chart showing quarterly performance"
    aria-describedby="chart-description"
  />
  <div id="chart-description" class="sr-only">
    Bar chart displaying sales data across three quarters: January ($40k), February ($20k), and March ($12k).
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import {
  Chart as ChartJS,
  Title,
  Tooltip,
  Legend,
  BarElement,
  CategoryScale,
  LinearScale
} from 'chart.js';
import { Bar } from 'vue-chartjs';

ChartJS.register(CategoryScale, LinearScale, BarElement, Title, Tooltip, Legend);

const data = ref({
  labels: ['January', 'February', 'March'],
  datasets: [{
    label: 'Sales',
    data: [40, 20, 12],
    backgroundColor: '#f87979'
  }]
});

const options = ref({
  responsive: true,
  maintainAspectRatio: false
});
</script>

// Generic chart component
const Chart: ChartComponent;

// Typed chart components  
const Bar: TypedChartComponent<'bar'>;
const Line: TypedChartComponent<'line'>;
const Pie: TypedChartComponent<'pie'>;
const Doughnut: TypedChartComponent<'doughnut'>;
const PolarArea: TypedChartComponent<'polarArea'>;
const Radar: TypedChartComponent<'radar'>;
const Bubble: TypedChartComponent<'bubble'>;
const Scatter: TypedChartComponent<'scatter'>;

interface ChartProps<
  TType extends ChartType = ChartType,
  TData = DefaultDataPoint<TType>,
  TLabel = unknown
> {
  type: TType; // Required for Chart component only
  data: ChartData<TType, TData, TLabel>; // Required
  options?: ChartOptions<TType>; // Optional, defaults to {}
  plugins?: Plugin<TType>[]; // Optional, defaults to []
  datasetIdKey?: string; // Optional, defaults to 'label'
  updateMode?: UpdateMode; // Optional
  destroyDelay?: number; // Optional, defaults to 0 - delay before destroying chart instance
  ariaLabel?: string; // Optional - ARIA label for accessibility
  ariaDescribedby?: string; // Optional - ARIA described-by for accessibility
}

interface ChartComponentRef<
  TType extends ChartType = ChartType,
  TData = DefaultDataPoint<TType>,
  TLabel = unknown
> {
  chart: ChartJS<TType, TData, TLabel> | null;
}

type ChartComponent = DefineComponent<ChartProps>;

type TypedChartComponent<
  TType extends ChartType,
  TData = DefaultDataPoint<TType>,
  TLabel = unknown
> = DefineComponent<Omit<ChartProps<TType, TData, TLabel>, 'type'>>;

/**
 * Creates a typed chart component with automatic Chart.js registration
 * @param type - Chart.js chart type
 * @param registerables - Chart.js components to register
 * @returns TypedChartComponent for the specified chart type
 */
function createTypedChart<
  TType extends ChartType = ChartType,
  TData = DefaultDataPoint<TType>,
  TLabel = unknown
>(
  type: TType,
  registerables: ChartComponentLike
): TypedChartComponent<TType, TData, TLabel>;

interface AccessibilityProps {
  /** ARIA label for the chart canvas element */
  ariaLabel?: string;
  /** ARIA described-by reference for detailed chart description */
  ariaDescribedby?: string;
  /** Delay in milliseconds before destroying chart instance (prevents memory leaks) */
  destroyDelay?: number; // defaults to 0
}

/**
 * Get dataset from mouse click event
 * @param chart - Chart.js instance
 * @param event - Mouse click event
 * @returns Dataset elements at event location
 */
function getDatasetAtEvent(chart: Chart, event: MouseEvent): InteractionItem[];

/**
 * Get single dataset element from mouse click event
 * @param chart - Chart.js instance  
 * @param event - Mouse click event
 * @returns Single element nearest to event location
 */
function getElementAtEvent(chart: Chart, event: MouseEvent): InteractionItem[];

/**
 * Get all dataset elements from mouse click event
 * @param chart - Chart.js instance
 * @param event - Mouse click event  
 * @returns All elements at the same index as event location
 */
function getElementsAtEvent(chart: Chart, event: MouseEvent): InteractionItem[];

// Extended data point interface for complex data structures (used in typed chart components like Bar)
interface ExtendedDataPoint {
  [key: string]: string | number | null | ExtendedDataPoint;
}

// Re-exported Chart.js types
import type {
  Chart,
  ChartType,
  ChartData,
  ChartDataset,
  ChartOptions,
  DefaultDataPoint,
  Plugin,
  UpdateMode,
  InteractionItem,
  ChartComponentLike
} from 'chart.js';