Charts

import { curveCatmullRom } from "@visx/curve";
import {
  Background,
  ChartBrush,
  ChartBrushLayout,
  ChartLegend,
  ChartTooltip,
  Line,
  LineChart,
  XAxis,
} from "@bklitui/ui/charts";

<ChartBrushLayout data={chartData} enabled height={72} brushStrip={...}>
  {(brushLayout) => (
    <LineChart data={chartData} xDomain={brushLayout.xDomain} tweenYDomainOnXDomainChange>
      <Background pattern="dots" opacity={0.85} />
      <Line dataKey="desktop" curve={curveCatmullRom} fadeEdges stroke="var(--chart-1)" strokeWidth={2} />
      <Line dataKey="mobile" curve={curveCatmullRom} fadeEdges stroke="var(--chart-2)" strokeWidth={2} />
      <Line dataKey="tablet" curve={curveCatmullRom} fadeEdges stroke="var(--chart-3)" strokeWidth={2} />
      <XAxis />
      <ChartTooltip />
    </LineChart>
  )}
</ChartBrushLayout>

const chartData = Array.from({ length: 30 }, (_, i) => ({
  date: new Date(2025, 0, 1 + i),
  desktop: Math.round(180 + Math.sin(i / 4.2) * 70 + ((i * 9) % 31)),
  mobile: Math.round(120 + Math.cos(i / 3.8) * 55 + ((i * 5) % 23)),
  tablet: Math.round(150 + Math.sin(i / 5.1 + 1) * 48 + ((i * 7) % 19)),
}));

import {
  buildProjectionPath,
  LineSeriesTerminalMarker,
  ProjectionLine,
} from "@bklitui/ui/charts";

const targetProjectionPath = buildProjectionPath({
  sourceData: chartData,
  seriesKey: "value",
  mode: "target",
  pathDensity: "endpoints",
  horizonPoints: 6,
  endValue: 301,
});

const autoProjectionPath = buildProjectionPath({
  sourceData: chartData,
  seriesKey: "value",
  mode: "auto",
  autoMethod: "lastSegment",
  pathDensity: "endpoints",
  horizonPoints: 6,
});

<LineChart data={chartData}>
  <Grid horizontal />
  <Line dataKey="value" strokeWidth={2} />
  <LineSeriesTerminalMarker dataKey="value" />
  <ProjectionLine
    data={targetProjectionPath}
    strokeDasharray="1,4"
    curveKind="bezier"
    strokeStyle="gradient"
    showEndMarker
  />
  <ProjectionLine
    data={autoProjectionPath}
    strokeDasharray="1,4"
    curveKind="bezier"
    strokeStyle="gradient"
    showEndMarker
  />
  <XAxis />
  <ChartTooltip />
</LineChart>

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

<LineChart margin={{ top: 8, right: 8, bottom: 40, left: 8 }} data={chartData}>
  <Grid horizontal />
  <Line dataKey="desktop" curve={curveLinear} strokeWidth={2} />
  <ChartTooltip />
</LineChart>

const markers = [
  { date: new Date(2024, 2, 1), icon: "🚀", title: "v2.0 Launch" },
  { date: new Date(2024, 4, 1), icon: "📈", title: "Marketing Push" },
];

<LineChart margin={{ top: 8, right: 8, bottom: 40, left: 8 }} data={chartData}>
  <Grid horizontal />
  <Line dataKey="desktop" strokeWidth={2} />
  <ChartMarkers items={markers} />
  <ChartTooltip />
</LineChart>

<LineChart margin={{ top: 8, right: 8, bottom: 40, left: 8 }} data={chartData}>
  <Grid horizontal />
  <Line dataKey="desktop" strokeWidth={2} />
  <SegmentBackground />
  <SegmentLineFrom />
  <SegmentLineTo />
  <ChartTooltip />
</LineChart>

<LineChart margin={{ top: 8, right: 8, bottom: 40, left: 8 }} data={chartData}>
  <Grid horizontal />
  <Line dataKey="desktop" stroke="var(--chart-1)" strokeWidth={2} />
  <Line dataKey="mobile" stroke="var(--chart-3)" strokeWidth={2} />
  <ChartTooltip />
</LineChart>

<LineChart margin={{ top: 8, right: 8, bottom: 40, left: 8 }} data={chartData}>
  <Grid horizontal />
  <Line dataKey="desktop" strokeWidth={2} />
  <XAxis />
  <ChartTooltip />
</LineChart>

<LineChart margin={{ top: 8, right: 8, bottom: 40, left: 8 }} data={chartData}>
  <Grid fadeHorizontal={false} horizontal vertical />
  <Line dataKey="desktop" strokeWidth={2} />
  <XAxis />
  <ChartTooltip />
</LineChart>

<LineChart data={chartData} xDataKey="date">
  <Grid horizontal />
  <Line
    dataKey="visitors"
    fadeEdges={false}
    showMarkers
    stroke="var(--chart-line-primary)"
    strokeWidth={2.5}
  />
  <XAxis tickMode="data" />
  <ChartTooltip />
</LineChart>

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

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

<LineChartLoading loadingStyle="sweep" />

<LineChart data={chartData} xDataKey="date">
  <Grid horizontal />
  <Line
    dataKey="visitors"
    dashArray="6,4"
    dashFromIndex={5}
    stroke="var(--chart-line-primary)"
    strokeWidth={2.5}
  />
  <XAxis tickMode="data" />
  <ChartTooltip />
</LineChart>

<LineChart data={chartData} margin={{ top: 8, right: 8, bottom: 40, left: 56 }}>
  <Grid horizontal />
  <Line dataKey="desktop" strokeWidth={2.5} />
  <Line dataKey="mobile" stroke="var(--chart-2)" strokeWidth={2.5} />
  <YAxis yAxisId="left" />
  <XAxis />
  <ChartTooltip />
</LineChart>

<LineChart data={chartData} margin={{ top: 8, right: 56, bottom: 40, left: 56 }}>
  <Grid horizontal />
  <Line dataKey="desktop" yAxisId="left" />
  <Line dataKey="mobile" yAxisId="right" stroke="var(--chart-2)" />
  <YAxis yAxisId="left" />
  <YAxis yAxisId="right" orientation="right" />
  <XAxis />
  <ChartTooltip />
</LineChart>

import {
  ProfitLossLine,
  ProfitLossLegend,
  ProfitLossLegendHoverProvider,
  profitLossColor,
  resolveProfitLossTooltipLabel,
} from "@bklitui/ui/charts";

<LineChart data={data}>
  <Grid highlightRowValues={[0]} horizontal />
  <Line dataKey="pnl" stroke="transparent" strokeWidth={0} showHighlight={false} />
  <ProfitLossLegendHoverProvider hoveredIndex={legendHoveredIndex}>
    <ProfitLossLine dataKey="pnl" />
  </ProfitLossLegendHoverProvider>
  <XAxis />
  <ChartTooltip
    indicatorColor={(point) => profitLossColor(point.pnl ?? 0)}
    rows={(point) => [{
      label: resolveProfitLossTooltipLabel(""),
      value: point.pnl ?? 0,
      color: profitLossColor(point.pnl ?? 0),
    }]}
  />
</LineChart>

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

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

<LineChart margin={{ top: 8, right: 8, bottom: 40, left: 8 }} data={chartData}>
  <ReferenceArea y1={160} y2={200} strokeStyle="dashed" showMarkers />
  <Line dataKey="value" strokeWidth={2} />
  <XAxis />
  <ChartTooltip />
</LineChart>

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

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

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