TypeScript

data-chart ships with built-in type definitions. Import once and get autocomplete for all data-chart-* attributes — no extra config needed.

Setup

import 'data-chart';

That’s it. This single import registers type augmentations for React (JSX/TSX) and Vue templates.

What You Get

All data-chart-* attributes are fully typed with autocomplete:

// React / TSX
<table
  data-chart="bar"                    // "bar" | "line" | "area" | "pie" | "donut"
  data-chart-grid="y"                 // "y" | "x" | "both" | "none"
  data-chart-legend="top"             // "top" | "bottom" | "none"
  data-chart-height="300"
  data-chart-radius="6"
  data-chart-colors="#2d5be3,#1a8c5a"
  data-chart-stacked
  data-chart-horizontal
/>

Exported Types

You can import types directly for custom use cases:

import type {
  DataChartType,        // "bar" | "line" | "area" | "pie" | "donut"
  DataChartGrid,        // "y" | "x" | "both" | "none"
  DataChartLegend,      // "top" | "bottom" | "none"
  DataChartAttributes,  // All data-chart-* attributes as an interface
} from 'data-chart';