Charts

import { curveMonotoneX } from "@visx/curve";

<AreaChart aspectRatio="4 / 1" data={chartData}>
  <Grid horizontal />
  <Area curve={curveMonotoneX} dataKey="revenue" fill="var(--chart-line-primary)" fillOpacity={0.3} strokeWidth={2} />
  <Area curve={curveMonotoneX} dataKey="costs" fill="var(--chart-line-secondary)" fillOpacity={0.2} strokeWidth={1.5} />
  <SegmentBackground />
  <SegmentLineFrom />
  <SegmentLineTo />
  <XAxis />
  <ChartTooltip />
</AreaChart>

const chartData = Array.from({ length: 30 }, (_, i) => ({
  date: new Date(2024, 0, i + 1),
  revenue: Math.floor(8000 + Math.sin(i / 5) * 4000 + ((i * 11) % 2000)),
  costs: Math.floor(5000 + Math.cos(i / 4) * 2000 + ((i * 7) % 1500)),
}));

<AreaChart data={chartData}>
  <Grid horizontal />
  <Area dataKey="desktop" showValue valueLabelMaxCount={5} />
  <Area
    dataKey="mobile"
    fill="var(--chart-line-secondary)"
    showValue
    valueLabelMaxCount={5}
  />
  <XAxis />
  <ChartTooltip />
</AreaChart>

<AreaChart data={chartData}>
  <Grid horizontal />
  <Area dataKey="desktop" fillOpacity={0.3} strokeWidth={2} />
  <XAxis />
  <ChartTooltip />
</AreaChart>

import { curveStep } from "@visx/curve";

<AreaChart data={chartData}>
  <Grid horizontal />
  <Area dataKey="desktop" curve={curveStep} fillOpacity={0.3} />
  <XAxis />
  <ChartTooltip />
</AreaChart>

<AreaChart data={chartData}>
  <Grid horizontal />
  <Area
    dataKey="desktop"
    fill="var(--chart-line-primary)"
    fillOpacity={0.3}
  />
  <Area
    dataKey="mobile"
    fill="var(--chart-line-secondary)"
    fillOpacity={0.3}
  />
  <XAxis />
  <ChartTooltip />
</AreaChart>

<AreaChart data={chartData}>
  <Area
    dataKey="desktop"
    fillOpacity={0.5}
    gradientToOpacity={0.05}
    strokeWidth={2}
  />
  <ChartTooltip />
</AreaChart>

<AreaChart data={chartData}>
  <Area
    dataKey="desktop"
    fillOpacity={0.5}
    showLine={false}
  />
  <XAxis />
  <ChartTooltip />
</AreaChart>

<AreaChart data={chartData}>
  <Grid horizontal />
  <Area
    dataKey="desktop"
    fadeEdges
    fillOpacity={0.3}
    strokeWidth={2}
  />
  <XAxis />
  <ChartTooltip />
</AreaChart>

import { AreaChartLoading } from "@bklitui/ui/charts";

<AreaChartLoading
  gridShimmerSync
  label="Loading"
  stroke="var(--foreground)"
  strokeOpacity={0.5}
/>
// Uses curveNatural for the loading pulse path

<AreaChartLoading loadingStyle="sweep" />

<AreaChart data={chartData}>
  <Grid horizontal />
  <Area dataKey="desktop" fillOpacity={0.3} strokeWidth={2} />
  <SegmentBackground />
  <SegmentLineFrom />
  <SegmentLineTo />
  <XAxis />
  <ChartTooltip />
</AreaChart>

<AreaChart data={chartData}>
  <PatternLines
    height={6}
    id="area-pattern"
    orientation={["diagonal"]}
    stroke="var(--chart-1)"
    strokeWidth={1}
    width={6}
  />
  <PatternArea dataKey="desktop" fill="url(#area-pattern)" />
  <Area dataKey="desktop" fillOpacity={0} strokeWidth={2} />
  <XAxis />
  <ChartTooltip />
</AreaChart>

<AreaChart data={chartData} xDataKey="date">
  <Grid horizontal />
  <Area
    dataKey="visitors"
    fill="var(--chart-line-primary)"
    fillOpacity={0.35}
    showMarkers
    markers={{ radius: 5, ringGap: 2, strokeWidth: 2 }}
  />
  <XAxis tickMode="data" />
  <ChartTooltip />
</AreaChart>

<AreaChart data={chartData} xDataKey="date">
  <Grid horizontal />
  <Area
    dataKey="visitors"
    dashArray="6,4"
    dashFromIndex={5}
    fill="var(--chart-line-primary)"
    fillOpacity={0.35}
    stroke="var(--chart-line-primary)"
  />
  <XAxis tickMode="data" />
  <ChartTooltip />
</AreaChart>

<AreaChart data={chartData} margin={{ top: 8, right: 8, bottom: 40, left: 56 }}>
  <Grid horizontal />
  <Area dataKey="desktop" fillOpacity={0.3} strokeWidth={2} />
  <Area dataKey="mobile" fill="var(--chart-2)" fillOpacity={0.3} strokeWidth={2} />
  <YAxis yAxisId="left" />
  <XAxis />
  <ChartTooltip />
</AreaChart>

<AreaChart data={chartData} margin={{ top: 8, right: 56, bottom: 40, left: 56 }}>
  <Grid horizontal />
  <Area dataKey="desktop" yAxisId="left" fillOpacity={0.3} strokeWidth={2} />
  <Area dataKey="mobile" yAxisId="right" fill="var(--chart-2)" fillOpacity={0.3} strokeWidth={2} />
  <YAxis yAxisId="left" />
  <YAxis yAxisId="right" orientation="right" />
  <XAxis />
  <ChartTooltip />
</AreaChart>

<AreaChart margin={{ top: 8, right: 8, bottom: 40, left: 8 }} data={chartData}>
  <Background />
  <Area dataKey="desktop" fillOpacity={0.3} strokeWidth={2} />
  <XAxis />
  <ChartTooltip />
</AreaChart>

<AreaChart margin={{ top: 8, right: 8, bottom: 40, left: 8 }} data={chartData}>
  <Background pattern="dots" opacity={0.85} />
  <Area dataKey="desktop" fillOpacity={0.3} strokeWidth={2} />
  <XAxis />
  <ChartTooltip />
</AreaChart>

<AreaChart margin={{ top: 8, right: 8, bottom: 40, left: 8 }} data={chartData}>
  <ReferenceArea y1={160} y2={220} strokeStyle="dashed" showMarkers />
  <Area dataKey="desktop" fillOpacity={0.3} strokeWidth={2} />
  <XAxis />
  <ChartTooltip />
</AreaChart>

<AreaChart margin={{ top: 8, right: 8, bottom: 40, left: 8 }} data={chartData}>
  <ReferenceArea
    y1={160}
    y2={220}
    pattern="diagonal"
    patternColor="var(--chart-foreground-muted)"
    axisLabelColor="var(--chart-1)"
    fillOpacity={0.85}
  />
  <Area dataKey="desktop" fillOpacity={0.3} strokeWidth={2} />
  <XAxis />
  <ChartTooltip />
</AreaChart>

<AreaChart margin={{ top: 8, right: 8, bottom: 40, left: 8 }} data={chartData}>
  <Grid horizontal />
  <Area dataKey="desktop" fillOpacity={0.3} strokeWidth={2} />
  <TrendLine dataKey="desktop" stroke="var(--chart-1)" />
  <XAxis />
  <ChartTooltip />
</AreaChart>

<AreaChart margin={{ top: 8, right: 8, bottom: 40, left: 8 }} data={chartData}>
  <Grid horizontal />
  <Area dataKey="desktop" fillOpacity={0.3} strokeWidth={2} />
  <TrendLine
    dataKey="desktop"
    strokeStyle="gradient"
    gradientStart="var(--chart-3)"
    gradientEnd="var(--chart-1)"
    strokeWidth={2.5}
    fadeEdges
  />
  <XAxis />
  <ChartTooltip />
</AreaChart>