Charts

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>
<ProfitLossLegend align="center" />

<LineChart data={data} margin={{ top: 40, right: 40, bottom: 40, left: 56 }}>
  <Grid highlightRowValues={[0]} horizontal />
  <Line dataKey="pnl" stroke="transparent" strokeWidth={0} showHighlight={false} />
  <ProfitLossLine dataKey="pnl" />
  <YAxis yAxisId="left" />
  <XAxis />
  <ChartTooltip />
</LineChart>

<LineChart data={data}>
  <Background />
  <Line dataKey="pnl" stroke="transparent" strokeWidth={0} showHighlight={false} />
  <ProfitLossLine dataKey="pnl" />
  <XAxis />
  <ChartTooltip />
</LineChart>

<LineChart data={data}>
  <Background pattern="dots" opacity={0.85} />
  <Line dataKey="pnl" stroke="transparent" strokeWidth={0} showHighlight={false} />
  <ProfitLossLine dataKey="pnl" />
  <XAxis />
  <ChartTooltip />
</LineChart>

<LineChart data={data}>
  <ReferenceArea y1={-200} y2={200} strokeStyle="dashed" showMarkers />
  <Line dataKey="pnl" stroke="transparent" strokeWidth={0} showHighlight={false} />
  <ProfitLossLine dataKey="pnl" />
  <XAxis />
  <ChartTooltip />
</LineChart>

<LineChart data={data}>
  <ReferenceArea
    y1={-200}
    y2={200}
    pattern="diagonal"
    patternColor="var(--chart-foreground-muted)"
    axisLabelColor="var(--chart-1)"
    fillOpacity={0.85}
  />
  <Line dataKey="pnl" stroke="transparent" strokeWidth={0} showHighlight={false} />
  <ProfitLossLine dataKey="pnl" />
  <XAxis />
  <ChartTooltip />
</LineChart>