Charts

<CandlestickChart data={ohlcData} margin={{ top: 8, right: 8, bottom: 40, left: 8 }} style={{ height: 320 }}>
  <Candlestick
    fadedOpacity={0.25}
    negativeFill="var(--chart-5)"
    positiveFill="var(--chart-1)"
  />
  <ChartTooltip
    content={OHLCTooltipContent}
    indicatorColor={(p) => (p.close >= p.open) ? "var(--chart-1)" : "var(--chart-5)"}
    showDots={false}
  />
  <XAxis />
</CandlestickChart>

interface OHLCDataPoint {
  date: Date;
  open: number;
  high: number;
  low: number;
  close: number;
}
const ohlcData: OHLCDataPoint[] = [ ... ];

<LinearGradient from="var(--color-lime-400)" id="candle-up" to="var(--color-emerald-500)" />
<LinearGradient from="var(--color-yellow-400)" id="candle-down" to="var(--color-red-500)" />
<CandlestickChart data={ohlcData} margin={{ top: 8, right: 8, bottom: 40, left: 8 }} style={{ height: 320 }}>
  <Candlestick
    fadedOpacity={0.25}
    negativeFill="url(#candle-down)"
    positiveFill="url(#candle-up)"
  />
  <ChartTooltip
    content={OHLCTooltipContent}
    indicatorColor={(p) => (p.close >= p.open) ? "var(--chart-positive)" : "var(--chart-negative)"}
    showDots={false}
  />
  <XAxis />
</CandlestickChart>

<CandlestickChart data={ohlcData} margin={{ top: 8, right: 8, bottom: 40, left: 8 }} style={{ height: 320 }}>
  <Candlestick
    fadedOpacity={0.25}
    negativeFill="var(--chart-3)"
    positiveFill="var(--chart-1)"
  />
  <ChartTooltip content={CandlestickTooltipContent} />
  <XAxis />
</CandlestickChart>

<LinearGradient from="var(--color-lime-400)" id="up" to="var(--color-emerald-500)" />
<LinearGradient from="var(--color-yellow-400)" id="down" to="var(--color-red-500)" />
<CandlestickChart data={ohlcData} margin={{ top: 8, right: 8, bottom: 40, left: 8 }} style={{ height: 320 }}>
  <Candlestick fadedOpacity={0.25} negativeFill="url(#down)" positiveFill="url(#up)" />
  <ChartTooltip content={CandlestickTooltipContent} />
  <XAxis />
</CandlestickChart>

<CandlestickChart candleWidth={8} data={ohlcData} margin={{ top: 8, right: 8, bottom: 40, left: 8 }} style={{ height: 320 }}>
  <Candlestick
    negativeFill="var(--color-red-500)"
    positiveFill="var(--color-emerald-500)"
  />
  <ChartTooltip content={CandlestickTooltipContent} />
  <XAxis />
</CandlestickChart>

<CandlestickChart candleGap={0.15} data={ohlcData} margin={{ top: 8, right: 8, bottom: 40, left: 8 }} style={{ height: 320 }}>
  <PatternLines id="candle-up" orientation={["diagonal"]} stroke="rgba(0,0,0,0.35)" ... PatternLines
  >/> id="candle-down" orientation={["diagonal"]} stroke="rgba(0,0,0,0.35)" ... Candlestick
  >/> bodyPatternNegative="url(#candle-down)" bodyPatternPositive="url(#candle-up)" />
  <ChartTooltip content={CandlestickTooltipContent} />
  <XAxis />
</CandlestickChart>

<CandlestickChart data={ohlcData} margin={{ top: 8, right: 8, bottom: 40, left: 8 }} style={{ height: 320 }}>
  <Candlestick fadedOpacity={0.25} />
  <ChartTooltip content={CandlestickTooltipContent} showCrosshair={false} showDots={false} />
  <XAxis />
</CandlestickChart>

<CandlestickChart data={ohlcData} margin={{ top: 8, right: 8, bottom: 40, left: 8 }} style={{ height: 320 }}>
  <Background />
  <Candlestick fadedOpacity={0.25} />
  <ChartTooltip content={CandlestickTooltipContent} />
  <XAxis />
</CandlestickChart>

<CandlestickChart data={ohlcData} margin={{ top: 8, right: 8, bottom: 40, left: 8 }} style={{ height: 320 }}>
  <Background pattern="dots" opacity={0.85} />
  <Candlestick fadedOpacity={0.25} />
  <ChartTooltip content={CandlestickTooltipContent} />
  <XAxis />
</CandlestickChart>

<CandlestickChart data={ohlcData} margin={{ top: 8, right: 8, bottom: 40, left: 8 }} style={{ height: 320 }}>
  <ReferenceArea y1={98} y2={108} strokeStyle="dashed" showMarkers />
  <Candlestick fadedOpacity={0.25} />
  <ChartTooltip content={CandlestickTooltipContent} />
  <XAxis />
</CandlestickChart>

<CandlestickChart data={ohlcData} margin={{ top: 8, right: 8, bottom: 40, left: 8 }} style={{ height: 320 }}>
  <ReferenceArea
    y1={98}
    y2={108}
    pattern="diagonal"
    patternColor="var(--chart-foreground-muted)"
    axisLabelColor="var(--chart-1)"
    fillOpacity={0.85}
  />
  <Candlestick fadedOpacity={0.25} />
  <ChartTooltip content={CandlestickTooltipContent} />
  <XAxis />
</CandlestickChart>