Skip to content

docs(charts): add more area charts #1666

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
aguingand wants to merge 3 commits into
base: dev
Choose a base branch
from
Open

docs(charts): add more area charts #1666

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
96f510c
chore: update unovis to 1.7.0
aguingand Jan 29, 2026
684c8e9
docs(charts): use Unovis area line props instead of separate line com…
aguingand Jan 29, 2026
5db68f2
docs(charts): add missing area charts
aguingand Jan 29, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
18 changes: 11 additions & 7 deletions apps/v4/constants/charts.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,13 @@
import type { Component } from 'vue'
import ChartAreaAxes from '~/registry/new-york-v4/charts/ChartAreaAxes.vue'
import ChartAreaDefault from '~/registry/new-york-v4/charts/ChartAreaDefault.vue'
import ChartAreaGradient from '~/registry/new-york-v4/charts/ChartAreaGradient.vue'
import ChartAreaIcons from '~/registry/new-york-v4/charts/ChartAreaIcons.vue'
import ChartAreaInteractive from '~/registry/new-york-v4/charts/ChartAreaInteractive.vue'
import ChartAreaLegend from '~/registry/new-york-v4/charts/ChartAreaLegend.vue'
import ChartAreaLinear from '~/registry/new-york-v4/charts/ChartAreaLinear.vue'
import ChartAreaStacked from '~/registry/new-york-v4/charts/ChartAreaStacked.vue'
import ChartAreaStep from '~/registry/new-york-v4/charts/ChartAreaStep.vue'
import ChartBarDefault from '~/registry/new-york-v4/charts/ChartBarDefault.vue'
import ChartBarHorizontal from '~/registry/new-york-v4/charts/ChartBarHorizontal.vue'
import ChartBarInteractive from '~/registry/new-york-v4/charts/ChartBarInteractive.vue'
Expand Down Expand Up @@ -46,14 +51,13 @@ export const charts: ChartGroups = {
component: ChartAreaInteractive,
fullWidth: true,
},
// { id: "chart-area-default", component: ChartAreaDefault },
// { id: "chart-area-linear", component: ChartAreaLinear },
// { id: "chart-area-step", component: ChartAreaStep },
// { id: "chart-area-legend", component: ChartAreaLegend },
// { id: "chart-area-stacked", component: ChartAreaStacked },
// { id: "chart-area-stacked-expand", component: ChartAreaStackedExpand },
{ id: 'ChartAreaDefault', component: ChartAreaDefault },
{ id: 'ChartAreaLinear', component: ChartAreaLinear },
{ id: 'ChartAreaStep', component: ChartAreaStep },
{ id: 'ChartAreaLegend', component: ChartAreaLegend },
{ id: 'ChartAreaStacked', component: ChartAreaStacked },
// { id: 'ChartAreaStackedExpand', component: ChartAreaStackedExpand },
{ id: 'ChartAreaIcons', component: ChartAreaIcons },
// { id: "chart-area-gradient", component: ChartAreaGradient },
{ id: 'ChartAreaGradient', component: ChartAreaGradient },
{ id: 'ChartAreaAxes', component: ChartAreaAxes },
],
Expand Down
8 changes: 2 additions & 6 deletions apps/v4/registry/new-york-v4/charts/ChartAreaAxes.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import type {
ChartConfig,
} from "@/registry/new-york-v4/ui/chart"
// import { Area, AreaChart, CartesianGrid, XAxis, YAxis } from "recharts"
import { VisArea, VisAxis, VisLine, VisXYContainer } from "@unovis/vue"
import { VisArea, VisAxis, VisXYContainer } from "@unovis/vue"

import { TrendingUp } from "lucide-vue-next"
import {
Expand Down Expand Up @@ -63,11 +63,7 @@ const chartConfig = {
:y="[(d: Data) => d.mobile, (d: Data) => d.desktop]"
:color="(d: Data, i: number) => [chartConfig.mobile.color, chartConfig.desktop.color][i]"
:opacity="0.4"
/>
<VisLine
:x="(d: Data) => d.month"
:y="[(d: Data) => d.mobile, (d: Data) => d.mobile + d.desktop]"
:color="(d: Data, i: number) => [chartConfig.mobile.color, chartConfig.desktop.color][i]"
:line="true"
:line-width="1"
/>
<VisAxis
Expand Down
107 changes: 107 additions & 0 deletions apps/v4/registry/new-york-v4/charts/ChartAreaDefault.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,107 @@
<script setup lang="ts">
import type {
ChartConfig,
} from "@/registry/new-york-v4/ui/chart"
// import { Area, AreaChart, CartesianGrid, XAxis, YAxis } from "recharts"
import { VisArea, VisAxis, VisXYContainer } from "@unovis/vue"
import { TrendingUp } from "lucide-vue-next"

import {
Card,
CardContent,
CardDescription,
CardFooter,
CardHeader,
CardTitle,
} from "@/registry/new-york-v4/ui/card"
import {
ChartContainer,
ChartCrosshair,
ChartLegendContent,
ChartTooltip,
ChartTooltipContent,
componentToString,
} from "@/registry/new-york-v4/ui/chart"

const description = "An area chart with axes"

const chartData = [
{ month: 1, monthLabel: "January", desktop: 186 },
{ month: 2, monthLabel: "February", desktop: 305 },
{ month: 3, monthLabel: "March", desktop: 237 },
{ month: 4, monthLabel: "April", desktop: 73 },
{ month: 5, monthLabel: "May", desktop: 209 },
{ month: 6, monthLabel: "June", desktop: 214 },
]

type Data = typeof chartData[number]

const chartConfig = {
desktop: {
label: "Desktop",
color: "var(--chart-1)",
},
} satisfies ChartConfig
</script>

<template>
<Card>
<CardHeader>
<CardTitle>Area Chart</CardTitle>
<CardDescription>
Showing total visitors for the last 6 months
</CardDescription>
</CardHeader>
<CardContent>
<ChartContainer :config="chartConfig">
<VisXYContainer :data="chartData" :margin="{ top: 10, bottom: 10 }">
<VisArea
:x="(d: Data) => d.month"
:y="[(d: Data) => d.desktop]"
:color="chartConfig.desktop.color"
:opacity="0.4"
:line="true"
:line-width="1"
/>
<VisAxis
type="x"
:x="(d: Data) => d.month"
:tick-line="false"
:domain-line="false"
:grid-line="false"
:num-ticks="6"
:tick-format="(d: number, index: number) => {
return chartData[index].monthLabel.slice(0, 3)
}"
Comment on lines +73 to +75
Copy link
Copy Markdown

@coderabbitai coderabbitai Bot Jan 29, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟡 Minor

Add defensive check for array index access.

🛡️ Suggested defensive fix 
             :tick-format="(d: number, index: number) => {
-              return chartData[index].monthLabel.slice(0, 3)
+              return chartData[index]?.monthLabel?.slice(0, 3) ?? ''
             }"
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
:tick-format="(d: number, index: number) => {
return chartData[index].monthLabel.slice(0, 3)
}"
:tick-format="(d: number, index: number) => {
return chartData[index]?.monthLabel?.slice(0, 3) ?? ''
}"
🤖 Prompt for AI Agents 
In `@apps/v4/registry/new-york-v4/charts/ChartAreaDefault.vue` around lines 73 -
75, In the tick-format arrow function bound in ChartAreaDefault.vue, add a
defensive check to avoid out-of-bounds or undefined access on chartData[index]
and its monthLabel before calling slice; update the lambda that currently
references chartData[index].monthLabel.slice(0, 3) to first verify index is
within chartData length and that chartData[index]?.monthLabel is a string, and
return a safe fallback (e.g., empty string or full label) when the checks fail.

/>
<VisAxis
type="y"
:num-ticks="3"
:tick-line="false"
:domain-line="false"
:tick-format="(d: number, index: number) => ''"
/>
<ChartTooltip />
<ChartCrosshair
:template="componentToString(chartConfig, ChartTooltipContent, { labelKey: 'monthLabel', indicator: 'line' })"
:color="chartConfig.desktop.color"
/>
</VisXYContainer>

<ChartLegendContent />
</ChartContainer>
</CardContent>
<CardFooter>
<div class="flex w-full items-start gap-2 text-sm">
<div class="grid gap-2">
<div class="flex items-center gap-2 leading-none font-medium">
Trending up by 5.2% this month <TrendingUp class="h-4 w-4" />
</div>
<div class="text-muted-foreground flex items-center gap-2 leading-none">
January - June 2024
</div>
</div>
</div>
</CardFooter>
</Card>
</template>
9 changes: 3 additions & 6 deletions apps/v4/registry/new-york-v4/charts/ChartAreaGradient.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import type {
ChartConfig,
} from "@/registry/new-york-v4/ui/chart"
// import { Area, AreaChart, CartesianGrid, XAxis, YAxis } from "recharts"
import { VisArea, VisAxis, VisLine, VisXYContainer } from "@unovis/vue"
import { VisArea, VisAxis, VisXYContainer } from "@unovis/vue"

import { TrendingUp } from "lucide-vue-next"
import {
Expand Down Expand Up @@ -90,11 +90,8 @@ const svgDefs = `
:y="[(d: Data) => d.mobile, (d: Data) => d.desktop]"
:color="(d: Data, i: number) => ['url(#fillMobile)', 'url(#fillDesktop)'][i]"
:opacity="0.4"
/>
<VisLine
:x="(d: Data) => d.month"
:y="[(d: Data) => d.mobile, (d: Data) => d.mobile + d.desktop]"
:color="(d: Data, i: number) => [chartConfig.mobile.color, chartConfig.desktop.color][i]"
:line="true"
:line-color="(d: Data, i: number) => [chartConfig.mobile.color, chartConfig.desktop.color][i]"
:line-width="1"
/>
<VisAxis
Expand Down
8 changes: 2 additions & 6 deletions apps/v4/registry/new-york-v4/charts/ChartAreaIcons.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import type {
ChartConfig,
} from "@/registry/new-york-v4/ui/chart"
// import { Area, AreaChart, CartesianGrid, XAxis, YAxis } from "recharts"
import { VisArea, VisAxis, VisLine, VisXYContainer } from "@unovis/vue"
import { VisArea, VisAxis, VisXYContainer } from "@unovis/vue"
import { TrendingDown, TrendingUp } from "lucide-vue-next"

import {
Expand Down Expand Up @@ -66,11 +66,7 @@ const chartConfig = {
:y="[(d: Data) => d.mobile, (d: Data) => d.desktop]"
:color="(d: Data, i: number) => [chartConfig.mobile.color, chartConfig.desktop.color][i]"
:opacity="0.4"
/>
<VisLine
:x="(d: Data) => d.month"
:y="[(d: Data) => d.mobile, (d: Data) => d.mobile + d.desktop]"
:color="(d: Data, i: number) => [chartConfig.mobile.color, chartConfig.desktop.color][i]"
:line="true"
:line-width="1"
/>
<VisAxis
Expand Down
9 changes: 3 additions & 6 deletions apps/v4/registry/new-york-v4/charts/ChartAreaInteractive.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
import type { ChartConfig } from "@/registry/new-york-v4/ui/chart"

// import { Area, AreaChart, CartesianGrid, XAxis, YAxis } from "recharts"
import { VisArea, VisAxis, VisLine, VisXYContainer } from "@unovis/vue"
import { VisArea, VisAxis, VisXYContainer } from "@unovis/vue"
import {
Card,
CardContent,
Expand Down Expand Up @@ -226,12 +226,9 @@ const filterRange = computed(() => {
:y="[(d: Data) => d.mobile, (d: Data) => d.desktop]"
:color="(d: Data, i: number) => ['url(#fillMobile)', 'url(#fillDesktop)'][i]"
:opacity="0.6"
/>
<VisLine
:x="(d: Data) => d.date"
:y="[(d: Data) => d.mobile, (d: Data) => d.mobile + d.desktop]"
:color="(d: Data, i: number) => [chartConfig.mobile.color, chartConfig.desktop.color][i]"
:line="true"
:line-width="1"
:line-color="(d: Data, i: number) => [chartConfig.mobile.color, chartConfig.desktop.color][i]"
/>
<VisAxis
type="x"
Expand Down
111 changes: 111 additions & 0 deletions apps/v4/registry/new-york-v4/charts/ChartAreaLegend.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,111 @@
<script setup lang="ts">
import type {
ChartConfig,
} from "@/registry/new-york-v4/ui/chart"
// import { Area, AreaChart, CartesianGrid, XAxis, YAxis } from "recharts"
import { VisArea, VisAxis, VisXYContainer } from "@unovis/vue"
import { TrendingUp } from "lucide-vue-next"

import {
Card,
CardContent,
CardDescription,
CardFooter,
CardHeader,
CardTitle,
} from "@/registry/new-york-v4/ui/card"
import {
ChartContainer,
ChartCrosshair,
ChartLegendContent,
ChartTooltip,
ChartTooltipContent,
componentToString,
} from "@/registry/new-york-v4/ui/chart"

const description = "An area chart with axes"

const chartData = [
{ month: 1, monthLabel: "January", desktop: 186, mobile: 80 },
{ month: 2, monthLabel: "February", desktop: 305, mobile: 200 },
{ month: 3, monthLabel: "March", desktop: 237, mobile: 120 },
{ month: 4, monthLabel: "April", desktop: 73, mobile: 190 },
{ month: 5, monthLabel: "May", desktop: 209, mobile: 130 },
{ month: 6, monthLabel: "June", desktop: 214, mobile: 140 },
]

type Data = typeof chartData[number]

const chartConfig = {
mobile: {
label: "Mobile",
color: "var(--chart-2)",
},
desktop: {
label: "Desktop",
color: "var(--chart-1)",
},
} satisfies ChartConfig
</script>

<template>
<Card>
<CardHeader>
<CardTitle>Area Chart - Legend</CardTitle>
<CardDescription>
Showing total visitors for the last 6 months
</CardDescription>
</CardHeader>
<CardContent>
<ChartContainer :config="chartConfig">
<VisXYContainer :data="chartData" :margin="{ top: 10, bottom: 10 }">
<VisArea
:x="(d: Data) => d.month"
:y="[(d: Data) => d.mobile, (d: Data) => d.desktop]"
:color="(d: Data, i: number) => [chartConfig.mobile.color, chartConfig.desktop.color][i]"
:opacity="0.4"
:line="true"
:line-width="1"
/>
<VisAxis
type="x"
:x="(d: Data) => d.month"
:tick-line="false"
:domain-line="false"
:grid-line="false"
:num-ticks="6"
:tick-format="(d: number, index: number) => {
return chartData[index].monthLabel.slice(0, 3)
}"
Comment on lines +77 to +79
Copy link
Copy Markdown

@coderabbitai coderabbitai Bot Jan 29, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟡 Minor

Add defensive check for array index access.

Same potential out-of-bounds issue as other chart files when Unovis passes unexpected index values.

🛡️ Suggested defensive fix 
             :tick-format="(d: number, index: number) => {
-              return chartData[index].monthLabel.slice(0, 3)
+              return chartData[index]?.monthLabel?.slice(0, 3) ?? ''
             }"
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
:tick-format="(d: number, index: number) => {
return chartData[index].monthLabel.slice(0, 3)
}"
:tick-format="(d: number, index: number) => {
return chartData[index]?.monthLabel?.slice(0, 3) ?? ''
}"
🤖 Prompt for AI Agents 
In `@apps/v4/registry/new-york-v4/charts/ChartAreaLegend.vue` around lines 77 -
79, The tick-format arrow function for the chart's ticks accesses
chartData[index].monthLabel without bounds checking; update the inline function
used in the :tick-format prop to defensively validate that chartData is an
array, index is a valid number within range, and chartData[index]?.monthLabel
exists before slicing, returning a safe fallback (e.g., empty string) when
checks fail so out-of-bounds or undefined values from Unovis cannot throw.

/>
<VisAxis
type="y"
:num-ticks="3"
:tick-line="false"
:domain-line="false"
:tick-format="(d: number, index: number) => ''"
/>
<ChartTooltip />
<ChartCrosshair
:template="componentToString(chartConfig, ChartTooltipContent, { labelKey: 'monthLabel', indicator: 'line' })"
:color="(d: Data, i: number) => [chartConfig.mobile.color, chartConfig.desktop.color][i % 2]"
/>
</VisXYContainer>

<ChartLegendContent />
</ChartContainer>
</CardContent>
<CardFooter>
<div class="flex w-full items-start gap-2 text-sm">
<div class="grid gap-2">
<div class="flex items-center gap-2 leading-none font-medium">
Trending up by 5.2% this month <TrendingUp class="h-4 w-4" />
</div>
<div class="text-muted-foreground flex items-center gap-2 leading-none">
January - June 2024
</div>
</div>
</div>
</CardFooter>
</Card>
</template>
Loading