### Install nuxt-charts

Source: https://github.com/dennisadriaans/vue-chrts/blob/main/packages/nuxt/README.md

Install the nuxt-charts module using npm, yarn, or pnpm.

```bash
# npm
npm install nuxt-charts

# yarn
yarn add nuxt-charts

# pnpm
pnpm add nuxt-charts
```

--------------------------------

### Install nuxt-charts for Nuxt 3+

Source: https://context7.com/dennisadriaans/vue-chrts/llms.txt

Install the Nuxt module for zero-config integration into Nuxt 3+ applications.

```bash
npm install nuxt-charts
```

--------------------------------

### Installation

Source: https://context7.com/dennisadriaans/vue-chrts/llms.txt

Instructions for installing the vue-chrts package for Vue 3 and the nuxt-charts module for Nuxt 3+.

```bash
npm install vue-chrts
# or
pnpm add vue-chrts
# or
yarn add vue-chrts
```

```bash
npm install nuxt-charts
```

```typescript
// nuxt.config.ts
export default defineNuxtConfig({
  modules: ['nuxt-charts'],
  // Optional module configuration
  nuxtCharts: {
    prefix: '',        // Component name prefix (default: '')
    global: true,      // Register as global components (default: true)
    autoImports: true, // Enable auto-imports (default: true)
    include: [],       // Specific components to include; empty = all (default: [])
  },
});
```

--------------------------------

### Revenue & Costs with Profit Line Example

Source: https://github.com/dennisadriaans/vue-chrts/blob/main/packages/vue/lib/components/DualChart/README.md

An example demonstrating how to display monthly revenue and costs as grouped bars with profit as a trend line, including legend positioning.

```APIDOC
## Example: Revenue & Costs with Profit Line

### Description

Shows monthly revenue and costs as grouped bars with profit as a trend line. This example also demonstrates how to set the legend position.

### Component Usage

```vue
<DualChart
  :data="data"
  :bar-categories="{ revenue: { name: 'Revenue', color: '#3b82f6' }, costs: { name: 'Costs', color: '#ef4444' } }"
  :line-categories="{ profit: { name: 'Profit', color: '#22c55e' } }"
  :bar-y-axis="['revenue', 'costs']"
  :line-y-axis="['profit']"
  :height="300"
  :legend-position="LegendPosition.TopRight"
/>
```
```

--------------------------------

### Install Vue-chrts for Vue.js

Source: https://github.com/dennisadriaans/vue-chrts/blob/main/packages/vue/README.md

Install the vue-chrts package using npm, yarn, or pnpm. Import chart components as needed.

```bash
# npm
npm install vue-chrts

# yarn
yarn add vue-chrts

# pnpm
pnpm add vue-chrts

# import component
import { LineChart } from 'vue-chrts';
```

--------------------------------

### Install vue-chrts for Vue 3

Source: https://context7.com/dennisadriaans/vue-chrts/llms.txt

Install the core Vue 3 chart component library using npm, pnpm, or yarn.

```bash
npm install vue-chrts
# or
pnpm add vue-chrts
# or
yarn add vue-chrts
```

--------------------------------

### Vue-chrts Usage Example

Source: https://github.com/dennisadriaans/vue-chrts/blob/main/packages/vue/README.md

Demonstrates how to use the LineChart component with sample data, categories, and formatters. Ensure data and categories are properly structured.

```vue
<script setup>
import { LineChart } from 'vue-chrts';

const data = [
  { month: 'Jan', sales: 100, profit: 50 },
  { month: 'Feb', sales: 120, profit: 55 },
  { month: 'Mar', sales: 180, profit: 80 },
  { month: 'Apr', sales: 110, profit: 40 },
  { month: 'May', sales: 90, profit: 30 },
];

const categories = {
  sales: {
    name: 'Sales',
    color: '#3b82f6'
  },
  profit: {
    name: 'Profit', 
    color: '#10b981'
  }
};

const xFormatter = (i) => data[i].month;
</script>

<template>
  <LineChart
    :data="data"
    :categories="categories"
    :height="300"
    :xFormatter="xFormatter"
    xLabel="Month"
    yLabel="Amount"
  />
</template>
```

--------------------------------

### Revenue & Costs with Profit Line Example

Source: https://github.com/dennisadriaans/vue-chrts/blob/main/packages/vue/lib/components/DualChart/README.md

Configures the DualChart to display monthly revenue and costs as grouped bars, with profit shown as a trend line. This example is useful for comparing absolute values (bars) against a trend (line).

```vue
<DualChart
  :data="data"
  :bar-categories="{ revenue: { name: 'Revenue', color: '#3b82f6' }, costs: { name: 'Costs', color: '#ef4444' } }"
  :line-categories="{ profit: { name: 'Profit', color: '#22c55e' } }"
  :bar-y-axis="['revenue', 'costs']"
  :line-y-axis="['profit']"
  :height="300"
  :legend-position="LegendPosition.TopRight"
/>
```

--------------------------------

### Install Vue-chrts for Nuxt.js

Source: https://github.com/dennisadriaans/vue-chrts/blob/main/packages/vue/README.md

Install the nuxt-charts package using npm, yarn, or pnpm. Add the module to your nuxt.config.ts file.

```bash
# npm
npm install nuxt-charts

# yarn
yarn add nuxt-charts

# pnpm
pnpm add nuxt-charts

# Add module to your nuxt.config.ts
export default defineNuxtConfig({
  modules: ["nuxt-charts"]
});
```

--------------------------------

### Basic DualChart Usage

Source: https://github.com/dennisadriaans/vue-chrts/blob/main/packages/vue/lib/components/DualChart/README.md

Demonstrates the basic setup for the DualChart component, including data definition, bar and line category configuration, and axis mapping. This is useful for creating a dual-axis chart with bars and lines.

```vue
<script setup lang="ts">
import { DualChart, LegendPosition } from 'vue-charts';

type DataItem = {
  month: string;
  revenue: number;
  costs: number;
  profit: number;
};

const data: DataItem[] = [
  { month: "January", revenue: 45000, costs: 30000, profit: 15000 },
  { month: "February", revenue: 52000, costs: 35000, profit: 17000 },
  // ... more data
];

const barCategories = {
  revenue: { name: "Revenue", color: "#3b82f6" },
  costs: { name: "Costs", color: "#ef4444" },
};

const lineCategories = {
  profit: { name: "Profit", color: "#22c55e" },
};
</script>

<template>
  <DualChart
    :data="data"
    :bar-categories="barCategories"
    :line-categories="lineCategories"
    :bar-y-axis="['revenue', 'costs']"
    :line-y-axis="['profit']"
    :height="300"
    :x-formatter="(tick: number): string => data[tick]?.month || ''"
    :tooltip-title-formatter="(d: DataItem) => d.month"
    y-label="Amount ($)"
  />
</template>
```

--------------------------------

### LineChart Component Example

Source: https://context7.com/dennisadriaans/vue-chrts/llms.txt

Renders a multi-series line chart with customizable data, categories, formatting, and visual properties. Ensure data and categories are properly typed.

```vue
<script setup lang="ts">
import { LineChart, CurveType, LegendPosition } from 'vue-chrts';

interface SalesPoint {
  month: string;
  revenue: number;
  profit: number;
}

const data: SalesPoint[] = [
  { month: 'Jan', revenue: 4200, profit: 1100 },
  { month: 'Feb', revenue: 5800, profit: 1400 },
  { month: 'Mar', revenue: 7200, profit: 2200 },
  { month: 'Apr', revenue: 6100, profit: 1800 },
  { month: 'May', revenue: 8900, profit: 3100 },
  { month: 'Jun', revenue: 9400, profit: 3600 },
];

const categories = {
  revenue: { name: 'Revenue', color: '#3b82f6' },
  profit:  { name: 'Profit',  color: '#10b981' },
};

const xFormatter = (_tick: number, i: number) => data[i]?.month ?? '';
const yFormatter = (tick: number) => `$${(tick / 1000).toFixed(1)}k`;
</script>

<template>
  <LineChart
    :data="data"
    :categories="categories"
    :height="320"
    :xFormatter="xFormatter"
    :yFormatter="yFormatter"
    :curveType="CurveType.MonotoneX"
    :legendPosition="LegendPosition.TopRight"
    :yNumTicks="5"
    :yGridLine="true"
    xLabel="Month"
    yLabel="USD"
  />
</template>
```

--------------------------------

### Use LineChart Component in Nuxt

Source: https://github.com/dennisadriaans/vue-chrts/blob/main/packages/nuxt/README.md

Example of using the LineChart component within a Nuxt application. Requires importing the component and providing data, categories, and formatting options.

```vue
<template>
  <div class="chart-wrapper">
  <LineChart
    :data="data"
    :categories="categories"
    :height="300"
    :xFormatter="xFormatter"
    xLabel="Month"
    yLabel="Amount"
  />
  </div>
</template>

<script setup>
import { LineChart } from 'vue-chrts';

const data = [
  { month: 'Jan', sales: 100, profit: 50 },
  { month: 'Feb', sales: 120, profit: 55 },
  { month: 'Mar', sales: 180, profit: 80 },
  { month: 'Apr', sales: 110, profit: 40 },
  { month: 'May', sales: 90, profit: 30 },
];

const categories = {
  sales: {
    name: 'Sales',
    color: '#3b82f6'
  },
  profit: {
    name: 'Profit', 
    color: '#10b981'
  }
};

const xFormatter = (i) => data[i].month;
</script>
```

--------------------------------

### Stacked Bars with Line Chart

Source: https://github.com/dennisadriaans/vue-chrts/blob/main/packages/vue/lib/components/DualChart/README.md

This setup visualizes stacked bars representing composition, with a trend line overlaid. It's useful for showing parts of a whole alongside a performance trend.

```vue
<DualChart
  :data="data"
  :bar-categories="barCategories"
  :line-categories="lineCategories"
  :bar-y-axis="['revenue', 'costs']"
  :line-y-axis="['profit']"
  :height="300"
  :stacked="true"
/>
```

--------------------------------

### Import LineChart Component in Vue 3

Source: https://context7.com/dennisadriaans/vue-chrts/llms.txt

Demonstrates how to import a specific chart component directly into a Vue 3 project. Ensure you have vue-chrts installed.

```javascript
import { LineChart } from 'vue-chrts'
```

--------------------------------

### Vue GanttChart Component

Source: https://context7.com/dennisadriaans/vue-chrts/llms.txt

Implement this component for timeline or Gantt charts. It displays horizontal bars grouped by rows, with customizable start, duration, and category mapping for coloring. Labels can be shown or hidden.

```vue
<script setup lang="ts">
import { GanttChart, LegendPosition } from 'vue-chrts';

interface Task {
  label: string;
  start: number;
  duration: number;
  phase: string;
}

const tasks: Task[] = [
  { label: 'Research',  start: 0,  duration: 14, phase: 'planning'  },
  { label: 'Design',    start: 10, duration: 20, phase: 'design'    },
  { label: 'Build',     start: 25, duration: 30, phase: 'dev'       },
  { label: 'QA',        start: 50, duration: 15, phase: 'testing'   },
  { label: 'Launch',    start: 62, duration: 8,  phase: 'launch'    },
];

const categories = {
  planning: { name: 'Planning', color: '#6366f1' },
  design:   { name: 'Design',   color: '#8b5cf6' },
  dev:      { name: 'Dev',      color: '#3b82f6' },
  testing:  { name: 'Testing',  color: '#f59e0b' },
  launch:   { name: 'Launch',   color: '#10b981' },
};
</script>

<template>
  <GanttChart
    :data="tasks"
    :categories="categories"
    :x="(d) => d.start"
    :length="(d) => d.duration"
    :type="(d) => d.phase"
    :height="220"
    :lineWidth="16"
    :rowHeight="28"
    :showLabels="true"
    :xNumTicks="8"
    :legendPosition="LegendPosition.TopRight"
  />
</template>
```

--------------------------------

### DualChart Component Usage

Source: https://github.com/dennisadriaans/vue-chrts/blob/main/packages/vue/lib/components/DualChart/README.md

Demonstrates the basic usage of the DualChart component with sample data and configuration for bar and line series.

```APIDOC
## DualChart Component

### Description

Combines bar and line charts to display multiple data series with different visualizations. Ideal for comparing metrics like actuals vs. targets, revenue with profit trends, or any scenario where you need to visualize data using different chart types simultaneously.

### Props

#### Required Props

- `data` (T[]): Array of data points to display.
- `barCategories` (Record<string, BulletLegendItemInterface>): Configuration for bar series (name and color).
- `lineCategories` (Record<string, BulletLegendItemInterface>): Configuration for line series (name and color).
- `barYAxis` ((keyof T)[]): Array of property keys for bar chart values.
- `lineYAxis` ((keyof T)[]): Array of property keys for line chart values.
- `height` (number): Chart height in pixels.

#### Optional Props

- `xLabel` (string): Label for x-axis.
- `yLabel` (string): Label for y-axis.
- `yLabelSecondary` (string): Label for secondary y-axis (if needed).
- `padding` ({ top, right, bottom, left }): Chart padding. Defaults to `{ top: 5, right: 5, bottom: 5, left: 5 }`.
- `xFormatter` (axisFormatter): Function to format x-axis tick labels.
- `yFormatter` (axisFormatter): Function to format y-axis tick labels.
- `tooltipTitleFormatter` ((data: T) => string | number): Custom tooltip title formatter.
- `curveType` (CurveType): Line curve type. Defaults to `MonotoneX`.
- `lineWidth` (number): Width of line in pixels. Defaults to `2`.
- `stacked` (boolean): Whether to stack bars. Defaults to `false`.
- `groupPadding` (number): Padding between bar groups. Defaults to `0`.
- `barPadding` (number): Padding between bars (0-1). Defaults to `0.2`.
- `radius` (number): Rounded corner radius for bars. Defaults to `0`.
- `orientation` (Orientation): Bar orientation. Defaults to `Vertical`.
- `legendPosition` (LegendPosition): Legend position. Defaults to `BottomCenter`.
- `hideLegend` (boolean): Hide legend. Defaults to `false`.
- `hideTooltip` (boolean): Hide tooltip. Defaults to `false`.
- `yGridLine` (boolean): Show y-axis grid lines. Defaults to `true`.
- `xGridLine` (boolean): Show x-axis grid lines. Defaults to `false`.
- `yDomainLine` (boolean): Show y-axis domain line. Defaults to `false`.
- `xDomainLine` (boolean): Show x-axis domain line. Defaults to `false`.
- `yTickLine` (boolean): Show y-axis tick lines. Defaults to `false`.
- `xTickLine` (boolean): Show x-axis tick lines. Defaults to `false`.
- `hideXAxis` (boolean): Hide x-axis. Defaults to `false`.
- `hideYAxis` (boolean): Hide y-axis. Defaults to `false`.
- `xNumTicks` (number): Number of x-axis ticks.
- `yNumTicks` (number): Number of y-axis ticks.
- `minMaxTicksOnly` (boolean): Show only min and max ticks. Defaults to `false`.
- `xExplicitTicks` ((number | string | Date)[]): Explicit x-axis tick values.

### Example Usage

```vue
<script setup lang="ts">
import { DualChart, LegendPosition } from 'vue-charts';

type DataItem = {
  month: string;
  revenue: number;
  costs: number;
  profit: number;
};

const data: DataItem[] = [
  { month: "January", revenue: 45000, costs: 30000, profit: 15000 },
  { month: "February", revenue: 52000, costs: 35000, profit: 17000 },
  // ... more data
];

const barCategories = {
  revenue: { name: "Revenue", color: "#3b82f6" },
  costs: { name: "Costs", color: "#ef4444" },
};

const lineCategories = {
  profit: { name: "Profit", color: "#22c55e" },
};
</script>

<template>
  <DualChart
    :data="data"
    :bar-categories="barCategories"
    :line-categories="lineCategories"
    :bar-y-axis="['revenue', 'costs']"
    :line-y-axis="['profit']"
    :height="300"
    :x-formatter="(tick: number): string => data[tick]?.month || ''"
    :tooltip-title-formatter="(d: DataItem) => d.month"
    y-label="Amount ($)"
  />
</template>
```
```

--------------------------------

### Dagre Graph Configuration

Source: https://context7.com/dennisadriaans/vue-chrts/llms.txt

Sets up nodes and links for a directed acyclic graph and configures layout, styling, and interactivity using Dagre.

```vue
<script setup lang="ts">
import { DagreGraph } from 'vue-chrts';
import type { GraphData, GraphNodeDatum, GraphLinkDatum } from 'vue-chrts';

const graph: GraphData<GraphNodeDatum, GraphLinkDatum> = {
  nodes: [
    { id: 'api',      label: 'API Gateway' },
    { id: 'auth',     label: 'Auth Service' },
    { id: 'users',    label: 'Users DB' },
    { id: 'payments', label: 'Payments' },
    { id: 'notify',   label: 'Notifications' },
  ],
  links: [
    { source: 'api',  target: 'auth' },
    { source: 'api',  target: 'payments' },
    { source: 'auth', target: 'users' },
    { source: 'payments', target: 'notify' },
  ],
};
</script>

<template>
  <DagreGraph
    :data="graph"
    :height="420"
    :nodeSize="44"
    nodeShape="circle"
    :nodeFill="(n) => n.id === 'api' ? '#6366f1' : '#e2e8f0'"
    :nodeStroke="() => '#94a3b8'"
    :nodeLabel="(n) => n.label ?? n.id"
    linkArrow="end"
    :linkCurvature="0.2"
    :dagreLayoutSettings="{ rankdir: 'TB', nodesep: 60, ranksep: 70 }"
    :zoomEnabled="true"
    :zoomScaleExtent="[0.3, 3]"
    :nodeDraggingEnabled="true"
  />
</template>
```

--------------------------------

### TooltipConfig Interface

Source: https://context7.com/dennisadriaans/vue-chrts/llms.txt

Configures tooltip behavior, such as delays for showing/hiding and whether the tooltip should follow the cursor.

```ts
interface TooltipConfig {
  hideDelay?: number;    // ms before tooltip hides (default: undefined)
  showDelay?: number;    // ms before tooltip shows (default: undefined)
  followCursor?: boolean; // Tooltip follows cursor
}
```

--------------------------------

### Compute Map Data and Snap Coordinates

Source: https://context7.com/dennisadriaans/vue-chrts/llms.txt

Utilize getMap to generate a dot-grid MapData object from GeoJSON, optionally filtering by countries or bounding box. Use getPin to convert lat/lng coordinates to the nearest grid dot.

```ts
import { getMap, getPin } from 'vue-chrts';
import countriesGeoJson from './countries.geo.json';

// Compute dot grid for Europe
const map = getMap({
  height: 80,
  countries: ['FRA', 'DEU', 'ESP', 'ITA', 'GBR'],
  grid: 'vertical',
  geojsonWorld: countriesGeoJson,
});
// map.points — Record of dot positions keyed as "x;y"
// map.width, map.height — final grid dimensions

// Snap Paris to nearest dot
const parisPin = getPin(map, { lat: 48.85, lng: 2.35 });
// => { x: 42, y: 18, lat: 48.846, lng: 2.352 }
```

--------------------------------

### TopoJSON Map Configuration

Source: https://context7.com/dennisadriaans/vue-chrts/llms.txt

Renders a geographic map using TopoJSON data, defining areas and points with specific styling and interactivity.

```vue
<script setup lang="ts">
import {
  TopoJSONMap,
  USATopoJSON,
  WorldMapTopoJSON,
  geoMercator,
} from 'vue-chrts';
import type { MapData, MapPoint, MapArea } from 'vue-chrts';

const mapData: MapData = {
  areas: [
    { id: 'US-CA', color: '#6366f1' },
    { id: 'US-TX', color: '#3b82f6' },
    { id: 'US-NY', color: '#10b981' },
  ] as MapArea[],
  points: [
    { id: 'sf',  latitude: 37.77, longitude: -122.42, color: '#f59e0b' },
    { id: 'nyc', latitude: 40.71, longitude:  -74.00, color: '#ef4444' },
  ] as MapPoint[],
};
</script>

<template>
  <TopoJSONMap
    :data="mapData"
    :topoJson="USATopoJSON"
    mapFeatureKey="properties.name"
    :height="420"
    :areaColor="(d) => d.color ?? '#e2e8f0'"
    :pointRadius="6"
    :pointColor="(d) => d.color ?? '#6366f1'"
    :pointLabel="(d) => d.id"
    :disableZoom="false"
    :zoomExtent="[1, 8]"
  />
</template>
```

--------------------------------

### Sales vs Target Bar and Line Chart

Source: https://github.com/dennisadriaans/vue-chrts/blob/main/packages/vue/lib/components/DualChart/README.md

Use this configuration to display quarterly sales as bars against a target line. Ensure your data is structured to provide both sales and target values.

```vue
<DualChart
  :data="salesData"
  :bar-categories="{ sales: { name: 'Actual Sales', color: '#8b5cf6' } }"
  :line-categories="{ target: { name: 'Target', color: '#f59e0b' } }"
  :bar-y-axis="['sales']"
  :line-y-axis="['target']"
  :height="300"
/>
```

--------------------------------

### Available TopoJSON Datasets

Source: https://context7.com/dennisadriaans/vue-chrts/llms.txt

Imports various pre-bundled TopoJSON datasets for different geographic regions from the vue-chrts library.

```typescript
import {
  USATopoJSON,
  USCountiesTopoJSON,
  WorldMapTopoJSON,
  WorldMap110mAlphaTopoJSON,
  WorldMapSimplestTopoJSON,
  ChinaTopoJSON,
  FranceTopoJSON,
  GermanyTopoJSON,
  IndiaTopoJSON,
  UKTopoJSON,
} from 'vue-chrts';
```

--------------------------------

### AxisConfig Interface

Source: https://context7.com/dennisadriaans/vue-chrts/llms.txt

Provides fine-tuning options for chart axes, including tick lines, text styling, formatting, and alignment.

```ts
interface AxisConfig {
  tickLine?: boolean;
  tickTextFontSize?: string;
  tickTextColor?: string;
  tickFormat?: axisFormatter;
  tickTextAlign?: 'left' | 'right' | 'center';
  tickTextAngle?: number;
  tickTextWidth?: number;
  tickTextFitMode?: 'wrap' | 'trim';
  minMaxTicksOnly?: boolean;
  tickValues?: readonly number[] | readonly Date[];
}
```

--------------------------------

### Vue DonutChart for Pie and Donut Visualizations

Source: https://context7.com/dennisadriaans/vue-chrts/llms.txt

DonutChart creates full or half donut/pie charts. Data is a `number[]` mapped by `categories`. Customize arc width, padding, and tooltips.

```vue
<script setup lang="ts">
import { DonutChart, DonutType, LegendPosition } from 'vue-chrts';

const data = [44, 28, 18, 10];

const categories = {
  direct:   { name: 'Direct',   color: '#6366f1' },
  organic:  { name: 'Organic',  color: '#3b82f6' },
  referral: { name: 'Referral', color: '#10b981' },
  social:   { name: 'Social',   color: '#f59e0b' },
};

const tooltipTitle = (_d: number) => 'Traffic source';
</script>

<template>
  <DonutChart
    :data="data"
    :categories="categories"
    :radius="120"
    :arcWidth="28"
    :height="300"
    :type="DonutType.Full"
    :padAngle="0.02"
    :legendPosition="LegendPosition.BottomCenter"
    :tooltipTitleFormatter="tooltipTitle"
  />
</template>
```

--------------------------------

### Single Bar with Multiple Lines Chart

Source: https://github.com/dennisadriaans/vue-chrts/blob/main/packages/vue/lib/components/DualChart/README.md

Configure the chart to show a single bar series with multiple trend lines for comparison. This is effective for comparing a primary metric against several benchmarks or forecasts.

```vue
<DualChart
  :data="data"
  :bar-categories="{ revenue: { name: 'Revenue', color: '#3b82f6' } }"
  :line-categories="{ 
    costs: { name: 'Costs', color: '#ef4444' }, 
    profit: { name: 'Profit', color: '#22c55e' } 
  }"
  :bar-y-axis="['revenue']"
  :line-y-axis="['costs', 'profit']"
  :height="300"
  :curve-type="CurveType.MonotoneX"
  :line-width="2"
/>
```

--------------------------------

### Configure nuxt-charts module

Source: https://context7.com/dennisadriaans/vue-chrts/llms.txt

Configure the nuxt-charts module in your nuxt.config.ts file to customize component registration and imports.

```typescript
// nuxt.config.ts
export default defineNuxtConfig({
  modules: ['nuxt-charts'],
  // Optional module configuration
  nuxtCharts: {
    prefix: '',        // Component name prefix (default: '')
    global: true,      // Register as global components (default: true)
    autoImports: true, // Enable auto-imports (default: true)
    include: [],       // Specific components to include; empty = all (default: [])
  },
});
```

--------------------------------

### Add nuxt-charts to Nuxt Config

Source: https://github.com/dennisadriaans/vue-chrts/blob/main/packages/nuxt/README.md

Add the nuxt-charts module to your Nuxt configuration file to enable its features.

```typescript
// nuxt.config.ts
export default defineNuxtConfig({
  modules: ["nuxt-charts"]
});
```

--------------------------------

### Orientation Enum for Bar Charts

Source: https://context7.com/dennisadriaans/vue-chrts/llms.txt

Defines orientation options for bar charts. Import and use to switch between vertical and horizontal layouts.

```typescript
import { Orientation } from 'vue-chrts';

// Orientation.Vertical | Orientation.Horizontal
```

--------------------------------

### Custom Tooltip Slot for DualChart

Source: https://github.com/dennisadriaans/vue-chrts/blob/main/packages/vue/lib/components/DualChart/README.md

Customize the chart's tooltip display using the `#tooltip` slot. This allows for rich, formatted information to be shown when hovering over data points.

```vue
<DualChart
  :data="data"
  :bar-categories="barCategories"
  :line-categories="lineCategories"
  :bar-y-axis="['revenue']"
  :line-y-axis="['profit']"
  :height="300"
>
  <template #tooltip="{ values }">
    <div class="custom-tooltip">
      <h3>{{ values.month }}</h3>
      <p>Revenue: ${{ values.revenue?.toLocaleString() }}</p>
      <p>Profit: ${{ values.profit?.toLocaleString() }}</p>
    </div>
  </template>
</DualChart>
```

--------------------------------

### Sankey Chart Configuration

Source: https://context7.com/dennisadriaans/vue-chrts/llms.txt

Defines nodes and links for a Sankey diagram and configures its appearance and behavior using accessor functions.

```vue
<script setup lang="ts">
import { SankeyChart } from 'vue-chrts';
import type { SankeyInputNode, SankeyInputLink } from '@unovis/ts';

const nodes: SankeyInputNode[] = [
  { id: 'visits' },
  { id: 'signups' },
  { id: 'trials' },
  { id: 'paid' },
  { id: 'churned' },
];

const links: SankeyInputLink[] = [
  { source: 'visits',  target: 'signups', value: 8000 },
  { source: 'signups', target: 'trials',  value: 3200 },
  { source: 'signups', target: 'churned', value: 4800 },
  { source: 'trials',  target: 'paid',    value: 1600 },
  { source: 'trials',  target: 'churned', value: 1600 },
];

const nodeColor = (n: SankeyInputNode) =>
  ({ visits: '#6366f1', signups: '#3b82f6', trials: '#10b981', paid: '#22c55e', churned: '#f87171' }[n.id] ?? '#94a3b8');
</script>

<template>
  <SankeyChart
    :data="{ nodes, links }"
    :height="340"
    :label="(n) => n.id"
    :nodeColor="nodeColor"
    :nodeWidth="16"
    :nodePadding="12"
    :highlightSubtreeOnHover="true"
    :labelFontSize="12"
    :labelMaxWidth="80"
  />
</template>
```

--------------------------------

### Render SVG Dot-Grid Map with Pins

Source: https://context7.com/dennisadriaans/vue-chrts/llms.txt

Use the DottedMap component to display a world or region map with customizable pins. Configure map dimensions, dot appearance, grid layout, background color, and country-specific colors.

```vue
<script setup lang="ts">
import { DottedMap } from 'vue-chrts';
import type { MapPin } from 'vue-chrts';

const pins: MapPin[] = [
  {
    lat: 48.85, lng: 2.35,
    svgOptions: { color: '#6366f1', radius: 5 },
    data: { city: 'Paris' },
  },
  {
    lat: 51.51, lng: -0.13,
    svgOptions: { color: '#10b981', radius: 5 },
    data: { city: 'London' },
  },
  {
    lat: 40.71, lng: -74.00,
    svgOptions: { color: '#f59e0b', radius: 5 },
    data: { city: 'New York' },
  },
];
</script>

<template>
  <DottedMap
    :mapHeight="60"
    :pins="pins"
    color="#94a3b8"
    :dotSize="0.4"
    shape="circle"
    grid="vertical"
    backgroundColor="#0f172a"
    :countryColors="{ USA: '#1e293b', GBR: '#1e293b', FRA: '#1e293b' }"
    :avoidOuterPins="true"
  />
</template>
```

--------------------------------

### BulletLegendItemInterface Definition

Source: https://context7.com/dennisadriaans/vue-chrts/llms.txt

Defines the structure for a category legend item, including display label, color, and visibility options.

```ts
interface BulletLegendItemInterface {
  name: string | number;   // Display label
  color?: string | string[]; // Color or gradient stops
  className?: string;
  inactive?: boolean;      // Grayed-out state
  hidden?: boolean;        // Remove from legend
  pointer?: boolean;       // Show pointer cursor
}
```

--------------------------------

### LegendPosition Enum for Chart Legends

Source: https://context7.com/dennisadriaans/vue-chrts/llms.txt

Specifies available placement options for chart legends. Import and use to control legend position.

```typescript
import { LegendPosition } from 'vue-chrts';

// LegendPosition.TopLeft | TopCenter | TopRight
// LegendPosition.BottomLeft | BottomCenter | BottomRight
```

--------------------------------

### MarkerConfig for Line/Area Charts

Source: https://context7.com/dennisadriaans/vue-chrts/llms.txt

Defines SVG line-end markers for area or line charts, specifying marker type, size, and color for different series.

```ts
type MarkerConfig = {
  id: string;
  config: {
    [key: string]: {
      type?: 'circle' | 'square' | 'triangle' | 'diamond';
      size?: number;
      strokeWidth?: number;
      color?: string;
      strokeColor?: string;
    };
  };
};

// Example: place a circle marker at each series endpoint
const markerConfig: MarkerConfig = {
  id: 'sales-marker',
  config: {
    revenue: { type: 'circle', size: 10, color: '#3b82f6', strokeColor: '#fff', strokeWidth: 2 },
    profit:  { type: 'diamond', size: 10, color: '#10b981', strokeColor: '#fff', strokeWidth: 2 },
  },
};
// <LineChart :markerConfig="markerConfig" ... />
```

--------------------------------

### DualChart Click Event Handling

Source: https://github.com/dennisadriaans/vue-chrts/blob/main/packages/vue/lib/components/DualChart/README.md

Handle chart click events to retrieve associated data values. The `@click` event emits the event object and the specific data values at the clicked point.

```vue
<DualChart
  :data="data"
  :bar-categories="barCategories"
  :line-categories="lineCategories"
  :bar-y-axis="['revenue']"
  :line-y-axis="['profit']"
  :height="300"
  @click="(event, values) => console.log('Clicked:', values)"
/>
```

--------------------------------

### Vue BarChart for Grouped and Stacked Data

Source: https://context7.com/dennisadriaans/vue-chrts/llms.txt

BarChart supports grouped, stacked, stacked-grouped, and horizontal layouts. Control rounded corners with `radius`, padding with `barPadding`/`groupPadding`, and orientation.

```vue
<script setup lang="ts">
import { BarChart, LegendPosition, Orientation } from 'vue-chrts';

interface QuarterData {
  quarter: string;
  north: number;
  south: number;
  west: number;
}

const data: QuarterData[] = [
  { quarter: 'Q1', north: 320, south: 210, west: 180 },
  { quarter: 'Q2', north: 450, south: 340, west: 290 },
  { quarter: 'Q3', north: 390, south: 280, west: 310 },
  { quarter: 'Q4', north: 510, south: 420, west: 370 },
];

const categories = {
  north: { name: 'North', color: '#3b82f6' },
  south: { name: 'South', color: '#10b981' },
  west:  { name: 'West',  color: '#f59e0b' },
};
</script>

<template>
  <!-- Grouped bar chart -->
  <BarChart
    :data="data"
    :categories="categories"
    :yAxis="['north', 'south', 'west']"
    xAxis="quarter"
    :xFormatter="(_t, i) => data[i]?.quarter"
    :height="300"
    :radius="4"
    :barPadding="0.1"
    :stacked="false"
    :legendPosition="LegendPosition.TopLeft"
    :yGridLine="true"
    :valueLabel="{
      label: (d, i) => d[Object.keys(d)[i]],
      labelFontSize: 11,
    }"
  />
</template>
```

--------------------------------

### Vue AreaChart with Gradient Fills

Source: https://context7.com/dennisadriaans/vue-chrts/llms.txt

Use AreaChart for overlaid or stacked area modes. Customize opacity gradients with `gradientStops`. Set `hideArea` to true for a line-only chart.

```vue
<script setup lang="ts">
import { AreaChart, CurveType } from 'vue-chrts';

const data = [
  { week: 'W1', pageviews: 12000, sessions: 8400 },
  { week: 'W2', pageviews: 15600, sessions: 10200 },
  { week: 'W3', pageviews: 13200, sessions: 9100 },
  { week: 'W4', pageviews: 18900, sessions: 12500 },
];

const categories = {
  pageviews: { name: 'Page Views', color: '#6366f1' },
  sessions:  { name: 'Sessions',   color: '#f59e0b' },
};

const gradientStops = [
  { offset: '0%',   stopOpacity: 0.4 },
  { offset: '100%', stopOpacity: 0.05 },
];
</script>

<template>
  <AreaChart
    :data="data"
    :categories="categories"
    :height="280"
    :xFormatter="(_t, i) => data[i]?.week"
    :curveType="CurveType.CatmullRom"
    :gradientStops="gradientStops"
    :stacked="false"
    :yGridLine="true"
    :xNumTicks="4"
  />
</template>
```

--------------------------------

### TypeScript Generics for DualChart Props

Source: https://github.com/dennisadriaans/vue-chrts/blob/main/packages/vue/lib/components/DualChart/README.md

Leverage TypeScript generics for type-safe data handling with the DualChart component. This ensures props are correctly typed, improving development safety and autocompletion.

```typescript
import { DualChart } from 'vue-charts';
import type { DualChartProps } from 'vue-charts';

type MyDataType = {
  month: string;
  value1: number;
  value2: number;
};

// Props will be type-checked
const props: DualChartProps<MyDataType> = {
  data: myData,
  barCategories: { value1: { name: 'Value 1', color: '#000' } },
  lineCategories: { value2: { name: 'Value 2', color: '#fff' } },
  barYAxis: ['value1'],
  lineYAxis: ['value2'],
  height: 300,
};
```

--------------------------------

### CurveType Enum for Line Charts

Source: https://context7.com/dennisadriaans/vue-chrts/llms.txt

Defines available line interpolation modes for area and line charts. Import and use in your template for custom line rendering.

```typescript
import { CurveType } from 'vue-chrts';

// Available values:
// CurveType.Linear | CurveType.MonotoneX | CurveType.CatmullRom
// CurveType.Basis | CurveType.Step | CurveType.StepAfter | CurveType.StepBefore
// CurveType.Natural | CurveType.Cardinal | CurveType.Bundle | ...

// Usage in a template:
// <LineChart :curveType="CurveType.MonotoneX" ... />
```

--------------------------------

### Vue DualChart Component

Source: https://context7.com/dennisadriaans/vue-chrts/llms.txt

Use this component to combine bar and line charts with independent y-axes. Define separate categories for bars and lines, and specify which data fields map to each axis. Useful for comparing different metrics over the same x-axis.

```vue
<script setup lang="ts">
import { DualChart, CurveType, LegendPosition } from 'vue-chrts';

interface Monthly {
  month: string;
  sales: number;
  returns: number;
  satisfaction: number;
}

const data: Monthly[] = [
  { month: 'Jan', sales: 420, returns: 38, satisfaction: 87 },
  { month: 'Feb', sales: 580, returns: 45, satisfaction: 84 },
  { month: 'Mar', sales: 710, returns: 52, satisfaction: 91 },
  { month: 'Apr', sales: 650, returns: 41, satisfaction: 89 },
];

const barCategories = {
  sales:   { name: 'Sales',   color: '#3b82f6' },
  returns: { name: 'Returns', color: '#f87171' },
};

const lineCategories = {
  satisfaction: { name: 'CSAT %', color: '#10b981' },
};
</script>

<template>
  <DualChart
    :data="data"
    :barCategories="barCategories"
    :lineCategories="lineCategories"
    :barYAxis="['sales', 'returns']"
    :lineYAxis="['satisfaction']"
    :xFormatter="(_t, i) => data[i]?.month"
    :yFormatter="(v) => `${v}`"
    :curveType="CurveType.MonotoneX"
    :height="320"
    :stacked="false"
    :yGridLine="true"
    :legendPosition="LegendPosition.TopLeft"
    yLabel="Units"
    yLabelSecondary="Score"
  />
</template>
```

--------------------------------

### Vue BubbleChart Component

Source: https://context7.com/dennisadriaans/vue-chrts/llms.txt

Use this component for scatter/bubble charts where data points are colored by category and sized by a numeric accessor. Ensure data, categories, and accessors are correctly defined.

```vue
<script setup lang="ts">
import { BubbleChart, LegendPosition } from 'vue-chrts';

interface Penguin {
  species: string;
  beak: number;
  flipper: number;
  mass: number;
}

const data: Penguin[] = [
  { species: 'Adelie',    beak: 38.9, flipper: 181, mass: 3750 },
  { species: 'Chinstrap', beak: 46.5, flipper: 192, mass: 3500 },
  { species: 'Gentoo',    beak: 47.5, flipper: 215, mass: 5500 },
  { species: 'Adelie',    beak: 37.8, flipper: 186, mass: 3800 },
  { species: 'Gentoo',    beak: 45.2, flipper: 220, mass: 5700 },
];

const categories = {
  Adelie:    { name: 'Adelie',    color: '#3b82f6' },
  Chinstrap: { name: 'Chinstrap', color: '#f59e0b' },
  Gentoo:    { name: 'Gentoo',    color: '#10b981' },
};
</script>

<template>
  <BubbleChart
    :data="data"
    :categories="categories"
    categoryKey="species"
    :xAccessor="(d) => d.beak"
    :yAccessor="(d) => d.flipper"
    :sizeAccessor="(d) => d.mass"
    :sizeRange="[4, 24]"
    :height="350"
    xLabel="Beak Length (mm)"
    yLabel="Flipper Length (mm)"
    :xGridLine="true"
    :yGridLine="true"
    :legendPosition="LegendPosition.TopRight"
  />
</template>
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.