Charts

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

<ComposedChart margin={{ top: 8, right: 8, bottom: 40, left: 8 }} data={data} xDataKey="date" aspectRatio="2 / 1" barGap={0} maxBarSize={32}>
  <Grid horizontal />
  <Area dataKey="runRate" curve={curveCatmullRom.alpha(0.42)} fill="var(--chart-4)" fillOpacity={0.32} />
  <SeriesBar dataKey="units" fill="var(--chart-3)" radius={4} />
  <Line dataKey="revenue" curve={curveCatmullRom.alpha(0.42)} stroke="var(--chart-1)" strokeWidth={2.5} />
  <ChartTooltip showCrosshair={false} />
  <XAxis numTicks={8} />
</ComposedChart>

<ComposedChart margin={{ top: 8, right: 8, bottom: 40, left: 8 }} data={data} xDataKey="date" aspectRatio="3 / 2" barGap={0} maxBarSize={32}>
  <Grid horizontal />
  <SeriesBar dataKey="units" fill="var(--chart-3)" radius={5} />
  <Line dataKey="revenue" stroke="var(--chart-1)" />
  <ChartTooltip showCrosshair={false} />
  <XAxis numTicks={8} />
</ComposedChart>

<ComposedChart margin={{ top: 8, right: 8, bottom: 40, left: 8 }} data={data} aspectRatio="3 / 2" barGap={0} maxBarSize={30} xDataKey="date">
  <Grid horizontal />
  <Area dataKey="runRate" fill="#ef4444" fillOpacity={0.22} stroke="#ef4444" strokeWidth={1.5} />
  <SeriesBar dataKey="units" fill="#bef264" radius={6} stroke="#bef264" />
  <Line dataKey="revenue" stroke="#fcd34d" strokeWidth={2.5} />
  <ChartTooltip showCrosshair={false} />
  <XAxis numTicks={8} />
</ComposedChart>

<ComposedChart margin={{ top: 8, right: 8, bottom: 40, left: 8 }} data={data} aspectRatio="3 / 2" stacked stackGap={0} barGap={0} maxBarSize={28}>
  <Grid horizontal />
  <SeriesBar dataKey="direct" fill="var(--chart-3)" />
  <SeriesBar dataKey="partner" fill="var(--chart-5)" />
  <Line dataKey="revenue" stroke="var(--chart-1)" />
  <ChartTooltip showCrosshair={false} />
  <XAxis numTicks={8} />
</ComposedChart>

<ComposedChart margin={{ top: 8, right: 8, bottom: 40, left: 8 }} data={data} aspectRatio="3 / 2" barGap={0} maxBarSize={26}>
  <Grid horizontal />
  <SeriesBar dataKey="units" fill="var(--chart-3)" radius={4} />
  <SeriesBar dataKey="runRate" fill="var(--chart-5)" radius={4} />
  <Line dataKey="revenue" stroke="var(--chart-1)" />
  <ChartTooltip showCrosshair={false} />
  <XAxis numTicks={8} />
</ComposedChart>

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

<ComposedChart margin={{ top: 8, right: 8, bottom: 40, left: 8 }} data={data} aspectRatio="3 / 2" barGap={0} maxBarSize={22}>
  <PatternLines id="composed-pat-fuchsia" height={6} width={6} orientation={["diagonal"]} stroke="#e879f9" strokeWidth={1} />
  <Grid horizontal />
  <SeriesBar dataKey="units" fill="url(#composed-pat-fuchsia)" stroke="#e879f9" />
  <SeriesBar dataKey="runRate" fill="var(--chart-5)" />
  <Line dataKey="revenue" stroke="var(--chart-1)" />
  <ChartTooltip showCrosshair={false} />
  <XAxis numTicks={8} />
</ComposedChart>

<ComposedChart margin={{ top: 8, right: 8, bottom: 40, left: 8 }} data={data} aspectRatio="3 / 2" barGap={0} maxBarSize={20}>
  <Grid horizontal />
  <SeriesBar dataKey="installs" fill="var(--chart-3)" radius={5} />
  <Line dataKey="desktop" stroke="var(--chart-1)" />
  <Line dataKey="mobile" stroke="var(--chart-2)" />
  <ChartTooltip showCrosshair={false} />
  <XAxis numTicks={8} />
</ComposedChart>

<ComposedChart data={data} xDataKey="date" aspectRatio="3 / 2">
  <Grid horizontal />
  <SeriesBar dataKey="revenue" fill="var(--chart-1)" radius={4} />
  <Area
    dataKey="runRate"
    dashArray="6,4"
    dashFromIndex={4}
    fill="var(--chart-4)"
    fillOpacity={0.3}
    showMarkers
  />
  <Line
    dataKey="runRate"
    dashArray="6,4"
    dashFromIndex={4}
    showMarkers
    stroke="var(--chart-2)"
    strokeWidth={2}
  />
  <ChartTooltip showCrosshair={false} />
  <XAxis tickMode="data" />
</ComposedChart>

<ComposedChart data={data} xDataKey="date" margin={{ top: 8, right: 8, bottom: 40, left: 56 }} barGap={0} maxBarSize={32}>
  <Grid horizontal />
  <SeriesBar dataKey="units" fill="var(--chart-3)" radius={4} />
  <Line dataKey="revenue" stroke="var(--chart-1)" />
  <YAxis yAxisId="left" />
  <ChartTooltip showCrosshair={false} />
  <XAxis numTicks={8} />
</ComposedChart>

<ComposedChart data={data} xDataKey="date" margin={{ top: 8, right: 56, bottom: 40, left: 56 }} barGap={0} maxBarSize={32}>
  <Grid horizontal />
  <SeriesBar dataKey="units" fill="var(--chart-3)" radius={4} />
  <Line dataKey="revenue" yAxisId="right" stroke="var(--chart-1)" />
  <YAxis yAxisId="left" />
  <YAxis yAxisId="right" orientation="right" />
  <ChartTooltip showCrosshair={false} />
  <XAxis numTicks={8} />
</ComposedChart>

<ComposedChart margin={{ top: 8, right: 8, bottom: 40, left: 8 }} data={data} xDataKey="date">
  <Background />
  <SeriesBar dataKey="units" fill="var(--chart-3)" radius={4} />
  <Line dataKey="revenue" stroke="var(--chart-1)" />
  <ChartTooltip showCrosshair={false} />
  <XAxis numTicks={8} />
</ComposedChart>

<ComposedChart margin={{ top: 8, right: 8, bottom: 40, left: 8 }} data={data} xDataKey="date">
  <Background pattern="dots" opacity={0.85} />
  <SeriesBar dataKey="units" fill="var(--chart-3)" radius={4} />
  <Line dataKey="revenue" stroke="var(--chart-1)" />
  <ChartTooltip showCrosshair={false} />
  <XAxis numTicks={8} />
</ComposedChart>

<ComposedChart margin={{ top: 8, right: 8, bottom: 40, left: 8 }} data={data} xDataKey="date">
  <ReferenceArea y1={95} y2={110} strokeStyle="dashed" showMarkers />
  <SeriesBar dataKey="units" fill="var(--chart-3)" radius={4} />
  <Line dataKey="revenue" stroke="var(--chart-1)" />
  <ChartTooltip showCrosshair={false} />
  <XAxis numTicks={8} />
</ComposedChart>

<ComposedChart margin={{ top: 8, right: 8, bottom: 40, left: 8 }} data={data} xDataKey="date">
  <ReferenceArea
    y1={95}
    y2={110}
    pattern="diagonal"
    patternColor="var(--chart-foreground-muted)"
    axisLabelColor="var(--chart-1)"
    fillOpacity={0.85}
  />
  <SeriesBar dataKey="units" fill="var(--chart-3)" radius={4} />
  <Line dataKey="revenue" stroke="var(--chart-1)" />
  <ChartTooltip showCrosshair={false} />
  <XAxis numTicks={8} />
</ComposedChart>

<ComposedChart margin={{ top: 8, right: 8, bottom: 40, left: 8 }} data={data} xDataKey="date">
  <Grid horizontal />
  <SeriesBar dataKey="units" fill="var(--chart-3)" radius={4} />
  <Line dataKey="revenue" stroke="var(--chart-2)" />
  <TrendLine dataKey="revenue" stroke="var(--chart-1)" />
  <ChartTooltip showCrosshair={false} />
  <XAxis numTicks={8} />
</ComposedChart>

<ComposedChart margin={{ top: 8, right: 8, bottom: 40, left: 8 }} data={data} xDataKey="date">
  <Grid horizontal />
  <SeriesBar dataKey="units" fill="var(--chart-3)" radius={4} />
  <Line dataKey="revenue" stroke="var(--chart-2)" />
  <TrendLine
    dataKey="revenue"
    strokeStyle="gradient"
    gradientStart="var(--chart-3)"
    gradientEnd="var(--chart-1)"
    strokeWidth={2.5}
    fadeEdges
  />
  <ChartTooltip showCrosshair={false} />
  <XAxis numTicks={8} />
</ComposedChart>