Nuxt Charts

https://nuxtcharts.com/docs
Admin
Nuxt Charts is a module that provides a collection of charting components and utilities for building...
Tokens:36,668
Snippets:234
Trust Score:5.5
Update:4 months ago
Show doc for...
Tokens:
Raw
### Vue Charts Quick Start Example

Source: https://nuxtcharts.com/docs/getting-started/vue-chrts

Demonstrates how to import and use the LineChart component and LegendPosition from vue-chrts in a Vue.js project. It includes sample data and category configurations.

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

const data = [
  { month: 'Jan', sales: 100 },
  { month: 'Feb', sales: 120 },
]

const categories = {
  sales: {
    name: 'Sales',
    color: '#3b82f6'
  }
}
</script>

<template>
  <LineChart
    :data="data"
    :categories="categories"
    :legendPosition="LegendPosition.TopCenter"
  />
</template>

```

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

### DonutChart Usage Example

Source: https://nuxtcharts.com/docs/charts/donut-chart

A practical example demonstrating how to use the DonutChart component with sample data and configuration.

```APIDOC
## Usage Example

This example shows how to integrate the `DonutChart` component into a Vue application.

```vue
<script setup lang="ts">
import { ref } from 'vue'

// Assuming BulletLegendItemInterface is defined elsewhere
interface BulletLegendItemInterface {
  name: string
  color: string
}

const data = ref([35, 25, 20, 15, 5])

const labels = [
  { name: 'Product A', color: '#3b82f6' },
  { name: 'Product B', color: '#22c55e' },
  { name: 'Product C', color: '#f59e0b' },
  { name: 'Product D', color: '#a855f7' },
  { name: 'Other', color: '#06b6d4' },
]

const categories: Record<string, BulletLegendItemInterface> = 
  Object.fromEntries(
    labels.map((i) => [i.name, { name: i.name, color: i.color }]),
  )
</script>

<template>
  <DonutChart
    :data="data"
    :height="260"
    :categories="categories"
    :radius="4"
    :arc-width="20"
    :pad-angle="0.1"
  />
</template>
```
```

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

### Install Nuxt Charts CLI Globally

Source: https://nuxtcharts.com/docs/getting-started/cli

Installs the Nuxt Charts CLI globally on your system. This allows you to use the `nuxt-charts` command from any directory. Ensure you have Node.js and a package manager (pnpm, yarn, npm, or bun) installed.

```pnpm
pnpm add -g nuxt-charts-cli
```

```yarn
yarn global add nuxt-charts-cli
```

```npm
npm install -g nuxt-charts-cli
```

```bun
bun add -g nuxt-charts-cli
```

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

### Install Nuxt Charts Dependencies

Source: https://nuxtcharts.com/docs/getting-started/installation

Installs the Nuxt Charts package using various package managers. Ensure correct configuration for pnpm to avoid potential errors.

```pnpm
pnpm add nuxt-charts
```

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

```yarn
yarn add nuxt-charts
```

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

### Dotted Map Resolution Examples (Vue)

Source: https://nuxtcharts.com/docs/maps/dotted-map

Shows two examples of adjusting the resolution of the DottedMap by modifying `mapHeight` and `dotSize`. The first example uses larger dots with less spacing, while the second uses smaller dots with more spacing for a denser appearance.

```vue
<!-- Big dots touching each other -->
<DottedMap
  :map-height="50"
  :dot-size="0.3"
/>

```

```vue
<!-- Small dots with more spacing -->
<DottedMap
   :map-height="75"
  :dot-size="0.3"
/>

```

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

### Install Nuxt Charts CLI for Premium Components

Source: https://nuxtcharts.com/docs/components/calendar

This command installs the Nuxt Charts CLI, which is necessary to access and use premium components like the Calendar.

```bash
nuxt-charts add Calendar

```

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

### Nuxt Donut Chart Usage Example

Source: https://nuxtcharts.com/docs/charts/donut-chart

Demonstrates how to use the DonutChart component within a Nuxt application's template. It shows the setup of reactive data for chart segments and the creation of a categories object to map labels and colors.

```vue
<script setup lang="ts">
import { ref } from 'vue';

const data = ref([35, 25, 20, 15, 5])

const labels = [
  { name: 'Product A', color: '#3b82f6' },
  { name: 'Product B', color: '#22c55e' },
  { name: 'Product C', color: '#f59e0b' },
  { name: 'Product D', color: '#a855f7' },
  { name: 'Other', color: '#06b6d4' },
]

const categories: Record<string, BulletLegendItemInterface> = 
  Object.fromEntries(
    labels.map((i) => [i.name, { name: i.name, color: i.color }]),
  )
</script>

<template>
  <DonutChart
    :data="data"
    :height="260"
    :categories="categories"
    :radius="4"
    :arc-width="20"
    :pad-angle="0.1"
  />
</template>

```

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

### Nuxt Grouped Bar Chart Implementation

Source: https://nuxtcharts.com/docs/charts/bar-chart

Illustrates how to implement a grouped bar chart in Nuxt.js using the BarChart component. This example displays multiple data series side-by-side for each category, facilitating direct comparison. It includes data setup, category definitions, and axis formatting.

```vue
<script lang="ts" setup>
defineOptions({
  tags: ['barcharts', 'group']
})

withDefaults(
  defineProps<{
    showTitle?: boolean
  }>(),
  {
    showTitle: false
  }
)

type RevenueDataItem = {
  month: string
  desktop: number
  mobile: number
}

const RevenueData: RevenueDataItem[] = [
  { month: 'January', desktop: 186, mobile: 80 },
  { month: 'February', desktop: 305, mobile: 200 },
  { month: 'March', desktop: 237, mobile: 120 },
  { month: 'April', desktop: 73, mobile: 190 },
  { month: 'May', desktop: 209, mobile: 130 },
  { month: 'June', desktop: 214, mobile: 140 }
]

const RevenueCategoriesMultple = {
  desktop: { name: 'Desktop', color: '#3b82f6' },
  mobile: { name: 'Mobile', color: '#22c55e' }
}

const xFormatter = (i: number): string => `${RevenueData[i]?.month}`
const yFormatter = (tick: number) => tick.toString()
</script>

<template>
  <div
    class="mx-auto max-w-3xl space-y-6 rounded-lg"
    :class="showTitle ? 'p-6' : ''"
  >
    <div class="flex items-center justify-between">
      <h3 class="text-lg font-semibold">
        Bar Chart
      </h3>
      <NuxtLink to="/blocks/bar-charts">
        <UButton
          icon="i-lucide-copy"
          size="sm"
          variant="soft"
          color="neutral"
        />
      </NuxtLink>
    </div>
    <BarChart
      :data="RevenueData"
      :height="300"
      :categories="RevenueCategoriesMultple"
      :y-axis="['desktop', 'mobile']"
      :group-padding="0"
      :bar-padding="0.2"
      :x-num-ticks="6"
      :radius="4"
      :x-formatter="xFormatter"
      :y-formatter="yFormatter"
      :legend-position="LegendPosition.TopRight"
      :hide-legend="false"
      :y-grid-line="true"
    />
  </div>
</template>

```

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

### Install Category Distribution Component (CLI)

Source: https://nuxtcharts.com/docs/components/category-distribution

This command uses the Nuxt Charts CLI to add the premium CategoryDistribution component to your project. Ensure you have the CLI installed and configured.

```bash
nuxt-charts add CategoryDistribution

```

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

### Create a Line Chart Component

Source: https://nuxtcharts.com/docs/getting-started/installation

A Vue.js component demonstrating how to use the LineChart from Nuxt Charts. It defines sample data, categories, and an x-axis formatter to render a basic line chart.

```vue
<script setup lang="ts">
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: number) => data[i].month
</script>

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

```

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

### Install vue-chrts with npm

Source: https://nuxtcharts.com/docs/getting-started/vue-chrts

Installs the core vue-chrts library along with its peer dependencies, @unovis/ts and @unovis/vue, using the npm package manager.

```bash
npm install vue-chrts @unovis/ts @unovis/vue
```

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

### Install Nuxt Charts Components using CLI

Source: https://nuxtcharts.com/docs/components/progress-circle

Provides instructions on how to add premium components, such as ProgressCircle, to your project using the Nuxt Charts CLI. This command-line tool simplifies the integration of advanced charting components.

```bash
nuxt-charts add ProgressCircle

```

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

### Install vue-chrts with yarn

Source: https://nuxtcharts.com/docs/getting-started/vue-chrts

Installs the core vue-chrts library along with its peer dependencies, @unovis/ts and @unovis/vue, using the yarn package manager.

```bash
yarn add vue-chrts @unovis/ts @unovis/vue
```

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

### Install vue-chrts with pnpm

Source: https://nuxtcharts.com/docs/getting-started/vue-chrts

Installs the core vue-chrts library along with its peer dependencies, @unovis/ts and @unovis/vue, using the pnpm package manager.

```bash
pnpm add vue-chrts @unovis/ts @unovis/vue
```

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

### Example Usage of Nuxt Charts Legend Props

Source: https://nuxtcharts.com/docs/customize/legend

Provides a comprehensive example combining multiple legend customization props: `categories` for defining legend items, `legend-position` for placement, and `legend-style` for custom styling. This demonstrates a practical application of the legend configuration options.

```html
<LineChart
    :categories="categories"
    legend-position="bottomCenter"
    :legend-style="{ padding: '8px' }"
/>
```

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

### Configure Nuxt Module

Source: https://nuxtcharts.com/docs/getting-started/installation

Adds the 'nuxt-charts' module to your Nuxt.js application by updating the nuxt.config.ts file. This enables the charting capabilities within your project.

```typescript
export default defineNuxtConfig({
    modules: ["nuxt-charts"]
})
```

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

### Bubble Chart Configuration and Data Accessors (Vue)

Source: https://nuxtcharts.com/docs/charts/bubble-chart

This snippet demonstrates the setup of a Bubble Chart component in Vue.js, including defining data categories, month names, a number formatting function, and accessors for chart data. It specifies how to map data properties to chart axes and bubble sizes.

```vue
<script setup lang="ts">
import { LegendPosition } from 'vue-chart-next'

const categories1 = {
  'Documentary': { name: 'Documentary', color: 'var(--color-blue-400)' },
  'Romance': { name: 'Romance', color: 'var(--color-pink-400)' },
  'Sci-Fi/Fantasy': {
    name: 'Sci-Fi/Fantasy',
    color: 'var(--color-green-400)'
  },
  'Horror': { name: 'Horror', color: 'var(--color-purple-400)' }
}

const monthNames = [
  'Jan',
  'Feb',
  'Mar',
  'Apr',
  'May',
  'Jun',
  'Jul',
  'Aug',
  'Sep',
  'Oct',
  'Nov',
  'Dec'
]

function formatNumber(tick: number | Date): string {
  return typeof tick === 'number' ? tick.toFixed(1) : String(tick)
}

const xAccessor1 = (d: any) => d.month
const yAccessor1 = (d: any) => d.viewingHours
const sizeAccessor1 = (d: any) => d.subscribers
</script>

<template>
  <BubbleChart
    :data="bubbleChartData"
    :height="230"
    :categories="categories1"
    category-key="title"
    :x-accessor="xAccessor1"
    :y-accessor="yAccessor1"
    :size-accessor="sizeAccessor1"
    :legend-position="LegendPosition.BottomRight"
    :x-num-ticks="12"
    :x-formatter="(tick: number) => monthNames[tick - 1] ?? String(tick)"
    :y-formatter="(v: number | Date) => `${formatNumber(v)}B hrs`"
  />
</template>
```

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

### Display Map with Points using TopoJSON

Source: https://nuxtcharts.com/docs/maps/topojson-map

Renders a geographic map with point markers at specified coordinates. This example uses the WorldMapTopoJSON from '@unovis/ts/maps' and d3-geo for map projection. The 'data' prop includes both 'areas' and 'points' arrays to define the map's features and markers.

```vue
<script setup lang="ts">
import { WorldMapTopoJSON } from '@unovis/ts/maps'
import { geoMercator } from 'd3-geo'

const worldData = computed(() => ({
    areas: [
        { id: 'NL', count: 94, name: 'Netherlands' },
        { id: 'US', count: 91, name: 'United States' },
        { id: 'DE', count: 71, name: 'Germany' },
        { id: 'BR', count: 60, name: 'Brazil' },
        { id: 'FR', count: 59, name: 'France' },
        { id: 'ID', count: 48, name: 'Indonesia' },
        { id: 'KE', count: 42, name: 'Kenya' },
        { id: 'GB', count: 35, name: 'United Kingdom' },
        { id: 'CA', count: 30, name: 'Canada' }
    ],
    points: [
        {
            id: 'ams',
            latitude: 52.3676,
            longitude: 4.9041,
            color: 'var(--ui-bg-inverted)'
        },
        {
            id: 'nyc',
            latitude: 40.7128,
            longitude: -74.006,
            color: 'var(--ui-bg-inverted)'
        },
        {
            id: 'tyo',
            latitude: 35.6762,
            longitude: 139.6503,
            color: 'var(--ui-bg-inverted)'
        }
    ]
}))

const customProjection = geoMercator().center([0, 0])
</script>

<template>
    <div class="py-6">
        <TopoJSONMap
            :height="400"
            map-feature-key="countries"
            :projection="customProjection"
            :data="worldData"
            :topojson="WorldMapTopoJSON"
            :zoom-factor="1.1"
        />
    </div>
</template>

```

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

### Default Calendar Component Usage

Source: https://nuxtcharts.com/docs/components/calendar

A basic example of rendering the Calendar component with its default settings. This is the simplest way to include the calendar in your Nuxt application.

```vue
<template>
  <Calendar />
</template>

```

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

### Nuxt Area Chart: Single Line Example

Source: https://nuxtcharts.com/docs/charts/area-chart

This snippet illustrates how to create a single-line Area Chart for revenue visualization in a Nuxt.js application. It displays revenue trends over months, with options to customize labels, number of ticks, and legend visibility. This example also utilizes the `useResponsiveHeight` composable.

```vue
<script lang="ts" setup>
defineOptions({
  tags: ['areacharts', 'singleline']
})

import { useResponsiveHeight } from '~/composables/useResponsiveHeight'

withDefaults(
  defineProps<{
    showTitle?: boolean
  }>(),
  {
    showTitle: false
  }
)

const categories: Record<string, BulletLegendItemInterface> = {
  revenue: { name: 'Revenue', color: '#22c55e' }
}

interface AreaChartItem {
  date: string
  revenue: number
}

const AreaChartData: AreaChartItem[] = [
  { date: 'Jan 23', revenue: 2340 },
  { date: 'Feb 23', revenue: 2550 },
  { date: 'Mar 23', revenue: 2730 },
  { date: 'Apr 23', revenue: 2950 },
  { date: 'May 23', revenue: 3120 },
  { date: 'Jun 23', revenue: 3300 },
  { date: 'Jul 23', revenue: 3500 },
  { date: 'Aug 23', revenue: 3700 },
  { date: 'Sep 23', revenue: 3900 },
  { date: 'Oct 23', revenue: 3800 },
  { date: 'Nov 23', revenue: 3300 },
  { date: 'Dec 23', revenue: 2000 }
]

const xFormatter = (tick: number, _i?: number, _ticks?: number[]): string => {
  return `${AreaChartData[tick]?.date ?? ''}`
}

const { height } = useResponsiveHeight({
  default: 200,
  sm: 300
})
</script>

<template>
  <div
    class="mx-auto max-w-3xl space-y-6 rounded-lg"
    :class="showTitle ? 'p-6' : ''"
  >
    <div
      v-if="showTitle"
      class="flex items-center justify-between"
    >
      <h3 class="text-lg font-semibold">
        Area Chart
      </h3>
      <NuxtLink to="/blocks/area-charts">
        <UButton
          icon="i-lucide-copy"
          size="sm"
          variant="soft"
          color="neutral"
        />
      </NuxtLink>
    </div>
    <AreaChart
      :data="AreaChartData"
      :height="height"
      y-label="Revenue"
      x-label="Month"
      :categories="categories"
      :y-num-ticks="4"
      :x-num-ticks="7"
      :y-grid-line="true"
      :legend-position="LegendPosition.TopRight"
      :hide-legend="false"
      :x-formatter="xFormatter"
    />
  </div>
</template>

```

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

### Create a Multi-Line Chart with MonotoneX Curve in Nuxt.js

Source: https://nuxtcharts.com/docs/charts/line-chart

Illustrates how to generate a multi-line chart with a MonotoneX curve in a Nuxt.js application. This example configures data for desktop and mobile visits and customizes the x-axis formatter.

```vue
<script lang="ts" setup>
defineOptions({
  tags: ['linecharts', 'multilines']
})

withDefaults(
  defineProps<{
    showTitle?: boolean
  }>(),
  {
    showTitle: false
  }
)

const chartData = [
  { month: 'January', desktop: 186, mobile: 186 },
  { month: 'February', desktop: 305, mobile: 305 },
  { month: 'March', desktop: 237, mobile: 237 },
  { month: 'April', desktop: 260, mobile: 209 },
  { month: 'May', desktop: 209, mobile: 209 },
  { month: 'June', desktop: 250, mobile: 214 }
]

const categories: Record<string, BulletLegendItemInterface> = {
  desktop: { name: 'Desktop', color: '#3b82f6' },
  mobile: { name: 'Mobile', color: '#22c55e' }
}

const xFormatter = (tick: number, _i?: number, _ticks?: number[]): string => {
  return chartData[tick]?.month ?? ''
}
</script>

<template>
  <div
    class="mx-auto max-w-3xl space-y-6 rounded-lg"
    :class="showTitle ? 'p-6' : ''"
  >
    <div class="flex items-center justify-between">
      <h3 class="text-lg font-semibold">
        Line Chart
      </h3>
      <NuxtLink to="/blocks/line-charts">
        <UButton
          icon="i-lucide-copy"
          size="sm"
          variant="soft"
          color="neutral"
        />
      </NuxtLink>
    </div>
    <LineChart
      :data="chartData"
      :height="300"
      y-label="Number of visits"
      :x-num-ticks="2"
      :categories="categories"
      :x-formatter="xFormatter"
      :y-grid-line="true"
      :curve-type="CurveType.MonotoneX"
      :legend-position="LegendPosition.TopRight"
      :hide-legend="false"
    />
  </div>
</template>

```

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

### Nuxt Charts CLI: Add StatusTracker

Source: https://nuxtcharts.com/docs/components/status-tracker

Command to install the StatusTracker component using the Nuxt Charts CLI. This is the recommended way to integrate premium components into your Nuxt.js project.

```bash
nuxt-charts add StatusTracker

```

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

### Donut Chart Styling with CSS Variables

Source: https://nuxtcharts.com/docs/charts/donut-chart

Shows how to customize the appearance of the DonutChart component using CSS variables. The example demonstrates overriding the default background color to be transparent.

```css
:root {
  --vis-donut-background-color: transparent !important;
}
```

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

### Incorrect Usage of ClientOnly Wrapper for Charts

Source: https://nuxtcharts.com/docs/customize/server-side-rendering

This example shows an incorrect way to use the `<ClientOnly>` wrapper when dealing with charts. Wrapping individual chart components within a parent component that already handles charts can lead to rendering conflicts or errors. The warning advises against this nested approach.

```vue
<div>
  <h2 class="font-bold text-lg text-highlighted tracking-wide py-1">
    This will fail
  </h2>
  <ClientOnly>
    <LineChart 
      :data="data"
      :height="275"
      y-label="Sales"
      :x-num-ticks="4"
      :y-num-ticks="4"
      :categories="categories"
      :x-formatter="xFormatter"
      :grid-line-y="true"
      :legend-position="LegendPosition.TopRight"
    />
  </ClientOnly>
</div>

```

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

### Correct Usage of ClientOnly Wrapper for Chart Parent

Source: https://nuxtcharts.com/docs/customize/server-side-rendering

This example demonstrates the correct way to use the `<ClientOnly>` wrapper when a parent component contains chart-related elements. By wrapping the entire parent component (`MyChartWrapperComponent`), you ensure all its content, including any charts, is handled as a client-side-only unit, avoiding SSR issues.

```vue
<div>
  <ClientOnly>
    <MyChartWrapperComponent />
  </ClientOnly>
</div>

```

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

### Use ProgressCircle Component in Vue

Source: https://nuxtcharts.com/docs/components/progress-circle

Demonstrates how to implement the ProgressCircle component in a Vue application. This example shows how to pass various props like value, size, stroke-width, and show-label to customize the progress indicator's appearance and functionality.

```vue
<div class="flex flex-col items-center justify-center space-y-2">
  <ProgressCircle
    :value="88"
    :size="80"
    :stroke-width="8"
    :show-label="true"
  />
  <span class="text-center">Progress Example</span>
</div>

```

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

### Dynamic Import of Chart Component using defineAsyncComponent

Source: https://nuxtcharts.com/docs/customize/server-side-rendering

This example illustrates how to dynamically import a chart component using `defineAsyncComponent` in a TypeScript file. This ensures that the chart component is only loaded and executed on the client side, which is beneficial for SSR compatibility. It assumes the chart component is located at './MyChart.vue'.

```typescript
const MyChart = defineAsyncComponent(() => import('./MyChart.vue'))

```

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

### Nuxt Area Chart: Multiple Lines Example

Source: https://nuxtcharts.com/docs/charts/area-chart

This snippet demonstrates how to create a multi-line Area Chart using the Vue charts library in a Nuxt.js application. It visualizes desktop and mobile data over time, with customizable height, colors, and legend position. It relies on the `useResponsiveHeight` composable and `useColorMode` for dynamic styling.

```vue
<script lang="ts" setup>
defineOptions({
  tags: ['areacharts', 'multiplelines']
})

withDefaults(
  defineProps<{
    showTitle?: boolean
  }>(),
  {
    showTitle: false
  }
)

const { height } = useResponsiveHeight({
  default: 200,
  sm: 300
})

const colorMode = useColorMode()

interface AreaChartItem {
  date: string
  desktop: number
  mobile: number
}

const categories: ComputedRef<Record<string, BulletLegendItemInterface>>
  = computed(() => ({
    desktop: {
      name: 'Desktop',
      color: '#3b82f6'
    },
    mobile: {
      name: 'Mobile',
      color: '#22c55e'
    }
  }))

const AreaChartData: AreaChartItem[] = [
  { date: '2024-04-01', desktop: 75, mobile: 50 },
  { date: '2024-04-02', desktop: 125, mobile: 100 },
  { date: '2024-04-03', desktop: 167, mobile: 120 },
  { date: '2024-04-04', desktop: 260, mobile: 240 },
  { date: '2024-04-05', desktop: 240, mobile: 290 }
]

const xFormatter = (tick: number): string => {
  return `${AreaChartData[tick]?.date}`
}
</script>

<template>
  <div
    class="mx-auto max-w-3xl space-y-6 rounded-lg"
    :class="showTitle ? 'p-6' : ''"
  >
    <div
      v-if="showTitle"
      class="flex items-center justify-between"
    >
      <h3 class="text-lg font-semibold">
        Area Chart
      </h3>
      <NuxtLink to="/blocks/area-charts">
        <UButton
          icon="i-lucide-copy"
          size="sm"
          variant="soft"
          color="neutral"
        />
      </NuxtLink>
    </div>
    <AreaChart
      :key="colorMode.value"
      :data="AreaChartData"
      :height="height"
      :categories="categories"
      :y-grid-line="true"
      :x-formatter="xFormatter"
      :curve-type="CurveType.MonotoneX"
      :legend-position="LegendPosition.TopRight"
      :hide-legend="false"
    />
  </div>
</template>

```

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

### Customizing Calendar Appearance with CSS Classes

Source: https://nuxtcharts.com/docs/components/calendar

Shows how to customize the appearance of the ProCalendar component by passing a `classNames` object. This example customizes the header background and the selected date's background and text color.

```vue
<template>
  <ProCalendar :class-names="customClasses" />
</template>

<script setup lang="ts">
const customClasses = {
  header: 'bg-gray-200 dark:bg-gray-800',
  selected: '!bg-green-500 text-white',
}
</script>

```

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

### Nuxt Stacked Horizontal Bar Chart Implementation

Source: https://nuxtcharts.com/docs/charts/bar-chart

Shows how to create a stacked horizontal bar chart using the BarChart component in Nuxt.js. This example demonstrates stacking multiple data series and orienting the bars horizontally. It's useful for comparing parts of a whole across different categories.

```vue
<script lang="ts" setup>
defineOptions({
  tags: ['barcharts', 'stackedhorizontal']
})

const RevenueData = [
  { month: 'January', desktop: 186, mobile: 80 },
  { month: 'February', desktop: 305, mobile: 200 },
  { month: 'March', desktop: 237, mobile: 120 },
  { month: 'April', desktop: 73, mobile: 190 },
  { month: 'May', desktop: 209, mobile: 130 },
  { month: 'June', desktop: 214, mobile: 140 }
]
const RevenueCategoriesMultple = {
  desktop: { name: 'Desktop', color: '#3b82f6' },
  mobile: { name: 'Mobile', color: '#22c55e' }
}

const yFormatter = (i: number): string => `${RevenueData[i]?.month}`
</script>

<template>
  <BarChart
    :data="RevenueData"
    :stacked="true"
    :height="300"
    :categories="RevenueCategoriesMultple"
    :y-axis="['desktop', 'mobile']"
    :group-padding="0"
    :bar-padding="0.2"
    :x-num-ticks="6"
    :radius="4"
    :orientation="Orientation.Horizontal"
    :x-formatter="(i) => i"
    :y-formatter="yFormatter"
    :legend-position="LegendPosition.TopRight"
    :hide-legend="false"
    :x-grid-line="true"
  />
</template>

```

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

### Nuxt Chart Component using .client.vue Naming Convention

Source: https://nuxtcharts.com/docs/customize/server-side-rendering

This example demonstrates creating a Nuxt chart component with the `.client.vue` suffix. This naming convention prevents the component from being imported or rendered on the server side, ensuring client-side execution. It assumes you have a `LineChart` component and associated data and configuration.

```vue
<template>
  <LineChart
    :data="data"
    :height="275"
    y-label="Sales"
    :x-num-ticks="4"
    :y-num-ticks="4"
    :categories="categories"
    :x-formatter="xFormatter"
    :grid-line-y="true"
    :legend-position="LegendPosition.TopRight"
  />
</template>

```

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

### Step Area Chart in Nuxt.js

Source: https://nuxtcharts.com/docs/charts/area-chart

This example shows a step-type area chart in Nuxt.js, also featuring responsive height and custom x-axis formatting. It configures the `AreaChart` component with `curveType` set to `CurveType.Step` to achieve the stepped appearance. Similar to the basic area chart, it defines data, categories, and uses a responsive height composable.

```vue
<script lang="ts" setup>
defineOptions({
  tags: ['areacharts', 'step']
})

const { height } = useResponsiveHeight({
  default: 200,
  sm: 300
})
interface AreaChartItem {
  month: string
  desktop: number
}

const AreaChartData: AreaChartItem[] = [
  { month: 'January', desktop: 186 },
  { month: 'February', desktop: 305 },
  { month: 'March', desktop: 237 },
  { month: 'April', desktop: 73 },
  { month: 'May', desktop: 209 },
  { month: 'June', desktop: 214 }
]
const categories: Record<string, BulletLegendItemInterface> = {
  desktop: { name: 'Desktop', color: '#3b82f6' }
}

const xFormatter = (tick: number, _i?: number, _ticks?: number[]): string => {
  const month = AreaChartData[tick]?.month
  return month ? String(month) : ''
}
</script>

<template>
  <div
    class="mx-auto max-w-3xl space-y-6 rounded-lg"
  >
    <div class="flex items-center justify-between">
      <h3 class="text-lg font-semibold">
        Area Chart
      </h3>
      <NuxtLink to="/blocks/area-charts">
        <UButton
          icon="i-lucide-copy"
          size="sm"
          variant="soft"
          color="neutral"
        />
      </NuxtLink>
    </div>
    <AreaChart
      :data="AreaChartData"
      :height="height"
      x-label="Month"
      y-label="Score"
      :categories="categories"
      :y-num-ticks="4"
      :x-num-ticks="7"
      :y-grid-line="true"
      :legend-position="LegendPosition.TopRight"
      :hide-legend="false"
      :x-formatter="xFormatter"
      :curve-type="CurveType.Step"
    />
  </div>
</template>

```

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

### DonutChart Best Practices

Source: https://nuxtcharts.com/docs/charts/donut-chart

Guidelines and recommendations for effectively using the DonutChart component, including tips on tooltips, radius, and sizing.

```APIDOC
## Best Practices & Common Pitfalls

Follow these recommendations for optimal use of the `DonutChart` component.

### Key-Based Tooltips

The `DonutChart` uses the **keys** of the `categories` object to determine the labels shown in the default tooltip. To ensure your tooltips look "nice and cool", use display-ready strings as keys.

```javascript
// ❌ Technical keys lead to technical tooltips
const categories = {
  cpu: { name: 'CPU Usage', color: 'red' }
}

// ✅ Display keys lead to clean tooltips
const categories = {
  'CPU Usage': { name: 'CPU Usage', color: 'red' }
}
```

### Understanding Radius

In this component, the `radius` prop often controls the **corner radius** (segment rounding) rather than the outer radius of the chart.

*   **Keep it small:** Values between `2` and `8` provide a modern, rounded look.
*   **Avoid large values:** Setting `radius` to a high value (like `80` or `100` on a small chart) can distort the segments and break the tooltip interactive areas.

### Controlling Size

To adjust the physical dimensions of the donut, use `height` and `arcWidth` instead of `radius`:

*   **`height`**: Controls the overall size of the SVG container.
*   **`arcWidth`**: Controls the thickness of the donut ring (and the size of the inner hole).

```

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

### Manage Nuxt Charts CLI Commands

Source: https://nuxtcharts.com/docs/getting-started/cli

Provides essential commands for interacting with the Nuxt Charts CLI. These commands allow you to list available charts, add new charts, and access the full command-line help for advanced usage.

```Terminal
nuxt-charts list
```

```Terminal
nuxt-charts add calendar
```

```Terminal
nuxt-charts --help
```

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

### Basic Dotted Map Usage (Vue)

Source: https://nuxtcharts.com/docs/maps/dotted-map

Demonstrates the basic implementation of the DottedMap component in Vue. It shows how to define pins with latitude, longitude, and SVG options, and pass them to the DottedMap component along with map dimensions and dot size.

```vue
<script lang="ts" setup>
const pins = [
  { lat: 40.7128, lng: -74.006, svgOptions: { color: '#3b82f6', radius: 0.75 } },
  { lat: 51.5074, lng: -0.1278, svgOptions: { color: '#22c55e', radius: 0.75 } },
  { lat: 35.6762, lng: 139.6503, svgOptions: { color: '#f59e0b', radius: 0.75 } },
  { lat: 48.8566, lng: 2.3522, svgOptions: { color: '#8b5cf6', radius: 0.75 } },
  { lat: -33.8688, lng: 151.2093, svgOptions: { color: '#ef4444', radius: 0.75 } },
  { lat: 55.7558, lng: 37.6173, svgOptions: { color: '#06b6d4', radius: 0.75 } }
]
</script>

<template>
  <div class="flex items-center justify-center">
    <DottedMap
      :map-width="120"
      :map-height="50"
      :pins="pins"
      color="var(--ui-bg-accented)"
      :dot-size="0.5"
    />
  </div>
</template>

```

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

### Donut Chart Key-Based Tooltip Best Practice

Source: https://nuxtcharts.com/docs/charts/donut-chart

Illustrates the best practice for setting keys in the `categories` object for the DonutChart. Using display-ready strings as keys ensures that the default tooltip displays user-friendly labels instead of technical identifiers.

```javascript
// ❌ Technical keys lead to technical tooltips
const categories = {
  cpu: { name: 'CPU Usage', color: 'red' }
}

// ✅ Display keys lead to clean tooltips
const categories = {
  'CPU Usage': { name: 'CPU Usage', color: 'red' }
}
```

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

### Disable Tooltips in Nuxt Charts (Vue)

Source: https://nuxtcharts.com/docs/customize/tooltips

This example shows how to completely disable tooltips in Nuxt Charts by setting the `hideTooltip` boolean property to `true` on the chart component.

```vue
<AreaChart :hideTooltip="true" />

```

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

### Customize Chart CSS Variables

Source: https://nuxtcharts.com/docs/getting-started/installation

Customizes the appearance of charts by overriding CSS variables defined by Unovis, the underlying charting library. This allows for detailed theming of colors, tooltips, and axes.

```css
:root {
  --vis-color0: oklch(0.72 0.192 149.58) !important;
  --vis-color1: oklch(0.63 0.1963 157.86) !important;

  --tooltip-label-color: rgba(255, 255, 255, 0.5) !important;
  --tooltip-value-color: rgba(255, 255, 255, 1) !important;

  --vis-axis-grid-color: rgba(255, 255, 255, 0.1) !important;
  
  --vis-tooltip-background-color: #121212 !important;
  --vis-tooltip-border-color: none !important;

  --tooltip-label-color: rgba(255, 255, 255, 0.5);
  --tooltip-value-color: rgba(255, 255, 255, 1);

  --vis-tooltip-text-color: rgba(255, 255, 255, 0.5) !important;
  --vis-axis-tick-label-color: rgba(255, 255, 255, 0.5) !important;
  --vis-legend-label-color: rgba(255, 255, 255, 0.75) !important;

  --vis-axis-label-color: rgba(255, 255, 255, 0.5) !important;
  --vis-legend-label-color: rgba(255, 255, 255, 0.5) !important;
}

```

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

### Gantt Chart Basic Usage with TypeScript in Nuxt.js

Source: https://nuxtcharts.com/docs/charts/gantt-chart

Demonstrates the basic implementation of the GanttChart component in a Nuxt.js application using TypeScript. It defines the data structure for timeline items, sets up sprint dates, and configures chart properties like data, labels, and categories. Dependencies include Vue.js and potentially a charting library.

```vue
<script lang="ts" setup>
defineOptions({
  tags: ['timeline', 'basic']
})

export type TimelineItem = {
  name: string
  color: string
  startDate: number
  endDate: number
  department: 'Frontend' | 'Backend' | 'UX'
  description?: string
  label?: string
}

enum ProductType {
  Frontend = 'Frontend',
  Backend = 'Backend',
  UX = 'UX'
}

const SPRINT_START_MS = 1728172800000
const SPRINT_END_MS = 1729296000000

const COLORS = {
  Frontend: '#FF5733',
  Backend: '#33FF57',
  UX: '#3357FF'
}

const data: TimelineItem[] = [
  {
    name: 'AdSense Dashboard',
    color: COLORS.Frontend,
    startDate: SPRINT_START_MS + 2 * 86400000,
    endDate: SPRINT_START_MS + 6 * 86400000,
    department: 'Frontend' as const,
    description:
      'Develop a responsive dashboard for AdSense performance on mobile devices using modern frameworks.'
  },
  {
    name: 'Vita UI',
    color: COLORS.Frontend,
    startDate: SPRINT_START_MS + 7 * 86400000,
    endDate: SPRINT_END_MS - 1 * 86400000,
    department: 'Frontend' as const,
    description: 'Improve load times.'
  },
  {
    name: 'AR Playground',
    color: COLORS.Frontend,
    startDate: SPRINT_START_MS + 1 * 86400000,
    endDate: SPRINT_START_MS + 5 * 86400000,
    department: 'Frontend' as const,
    description: 'New augmented reality feature.'
  },

  {
    name: 'Search Posts API',
    color: COLORS.Backend,
    startDate: SPRINT_START_MS,
    endDate: SPRINT_START_MS + 4 * 86400000,
    department: 'Backend' as const,
    description: 'Optimize database.'
  },
  {
    name: 'ML Prediction API',
    color: COLORS.Backend,
    startDate: SPRINT_START_MS + 5 * 86400000,
    endDate: SPRINT_START_MS + 10 * 86400000,
    department: 'Backend' as const,
    description: 'Scalable REST endpoint'
  },
  {
    name: 'Currents User Service',
    color: COLORS.Backend,
    startDate: SPRINT_START_MS + 3 * 86400000,
    endDate: SPRINT_END_MS,
    department: 'Backend' as const,
    description:
      'Migrate user profile and authentication services for Google Currents to the new microservice architecture.'
  },
  {
    name: 'User Blocking Logic',
    color: COLORS.Backend,
    startDate: SPRINT_START_MS,
    endDate: SPRINT_START_MS + 2 * 86400000,
    department: 'Backend' as const,
    description:
      'Write the server-side logic and database schema for the Personal Blocklist feature in Search.'
  },

  {
    name: 'Assistant Snapshot UI',
    color: COLORS.UX,
    startDate: SPRINT_START_MS + 1 * 86400000,
    endDate: SPRINT_START_MS + 5 * 86400000,
    department: 'UX' as const,
    description:
      'Create a comprehensive design system and component library for the new Google Assistant Snapshot predictive cards.'
  },
  {
    name: 'Sites Creation Flow',
    color: COLORS.UX,
    startDate: SPRINT_START_MS + 6 * 86400000,
    endDate: SPRINT_END_MS,
    department: 'UX' as const,
    description:
      'Map out and prototype the optimal user flow for creating and publishing a new website in Google Sites.'
  },
  {
    name: 'A/B Test Buttons',
    color: COLORS.UX,
    startDate: SPRINT_START_MS + 3 * 86400000,
    endDate: SPRINT_START_MS + 8 * 86400000,
    department: 'UX' as const,
    description:
      'Conduct A/B testing on button placement and microcopy for the YouTube Community Contributions feature.'
  }
].sort((p1, p2) => p1.startDate - p2.startDate)

const x = (d: TimelineItem) => d.startDate
const length = (d: TimelineItem) => d.endDate - d.startDate
const type = (d: TimelineItem) => d.name

const categories: Record<string, BulletLegendItemInterface> = {
  [ProductType.Frontend]: {
    name: ProductType.Frontend,
    color: 'var(--color-orange-400)'
  },
  [ProductType.Backend]: {
    name: ProductType.Backend,
    color: 'var(--color-blue-400)'
  },
  [ProductType.UX]: { name: ProductType.UX, color: 'var(--color-yellow-400)' }
}
</script>

<template>
  <GanttChart
    :data="data"
    :show-labels="true"
    :label-width="100"
    :x="x"
    :x-num-ticks="5"
    :length="length"
    :type="type"
    :x-grid-line="true"
    :categories="categories"
  />
</template>

```

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

### Vue Component: StatusTracker Example

Source: https://nuxtcharts.com/docs/components/status-tracker

Demonstrates the usage of the StatusTracker component in a Vue.js application. It utilizes computed properties to generate status data and passes various props to customize the visual representation of service status.

```vue
<script lang="ts" setup>
const statusData = computed(() => {
  const statusHistory = Array.from({ length: 300 }, () => ({
    status: 'online',
  }))
  statusHistory[250]!.status = 'offline'
  return statusHistory
})
</script>

<template>
  <StatusTracker
    :status-data="statusData"
    :operational-status="true"
    :bar-width="4"
    :bar-gap="1"
    domain="example.com"
    uptime="99.9%"
  />
</template>

```

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

### Display Category Distribution Data (Vue)

Source: https://nuxtcharts.com/docs/components/category-distribution

This Vue script setup demonstrates how to use the CategoryDistribution component by defining sample data for categories and a trend indicator. It then renders the component with various props to visualize the data.

```vue
<script setup lang="ts">
const exampleCategories = [
  { label: 'Marketing', percentage: 40, color: '#6366f1', value: 4000 },
  { label: 'Sales', percentage: 25, color: '#22d3ee', value: 2500 },
  { label: 'Development', percentage: 20, color: '#10b981', value: 2000 },
  { label: 'Support', percentage: 15, color: '#f59e42', value: 1500 },
]

const exampleTrend = {
  value: '+8.2%',
  direction: 'up' as const,
}
</script>

<template>
  <div class="bg-elevated/50 w-full py-8">
    <CategoryDistribution
      :primary-value="100"
      :gap="2"
      :categories="exampleCategories"
      :trend="exampleTrend"
      legend-class="mt-4"
      class="mx-auto w-full max-w-lg"
    />
  </div>
</template>

```
Tokens:
Raw