2

OHLC Chart

PreviousNext

Open-High-Low-Close chart for financial data visualization.

"use client"

import { OHLCChart } from "@/components/ui/charts"

// Generate sample OHLC data
const generateOHLCData = () => {
  const data = []
  let price = 150
  const startDate = new Date("2024-01-01")

  for (let i = 0; i < 60; i++) {
    const date = new Date(startDate)
    date.setDate(startDate.getDate() + i)

    const volatility = 0.02
    const change = (Math.random() - 0.5) * price * volatility * 2
    const open = price
    const close = price + change
    const high = Math.max(open, close) + Math.random() * price * volatility
    const low = Math.min(open, close) - Math.random() * price * volatility

    data.push({
      date: date.toISOString().split("T")[0],
      open: Math.round(open * 100) / 100,
      high: Math.round(high * 100) / 100,
      low: Math.round(low * 100) / 100,
      close: Math.round(close * 100) / 100,
    })

    price = close
  }

  return data
}

const data = generateOHLCData()

export function OHLCChartDemo() {
  return (
    <div className="w-full max-w-2xl">
      <OHLCChart data={data} />
    </div>
  )
}

About

The OHLC Chart displays financial data using vertical lines with horizontal ticks showing open and close prices. Similar to candlestick charts but using a simpler visual representation.

Installation

pnpm dlx shadcn@latest add https://ui.simplifying.ai/r/ohlc-chart.json

Usage

import { OHLCChart } from "@/components/ui/charts"
 
const data = [
  { date: "2024-01-01", open: 100, high: 105, low: 98, close: 103 },
  { date: "2024-01-02", open: 103, high: 108, low: 101, close: 106 },
]
 
export function Example() {
  return <OHLCChart data={data} />
}

API Reference

PropTypeDefaultDescription
dataOHLCDataPoint[]requiredArray of OHLC data points
upColorstring"#22c55e"Color for bullish bars
downColorstring"#ef4444"Color for bearish bars
showGridbooleantrueShow grid lines
showTooltipbooleantrueShow tooltip on hover

Notes

  • OHLC charts are ideal for displaying stock price movements and other financial data
  • Each bar represents a time period with four key values: open, high, low, and close
  • Bullish bars (close > open) are displayed in green (upColor) by default
  • Bearish bars (close < open) are displayed in red (downColor) by default
  • The vertical line shows the range from low to high, with horizontal ticks indicating open (left) and close (right) prices
  • This chart type is more minimalist than candlestick charts while conveying the same information