DeFi Chart

Professional candlestick chart component for displaying cryptocurrency and financial market data with real-time updates.

DeFi Trading Charts

Live Data

$1.2T

Market Cap

$45.6B

24h Volume

42.3%

BTC Dominance

Fear & Greed

Chart Controls

Trading Pair

Timeframe

Price Information

$2,345.67

+$2.34(+0.10%)

24h High$2462.95

24h Low$2228.39

24h Volume$12.4M

Market Cap$284.5B

ETH/USD Candlestick Chart

1DBullish

Chart Comparison

Technical Analysis

Key Indicators

RSI (14)67.3

MACD+12.4

Bollinger BandsUpper: $2,456

Support$2,234

Resistance$2,567

Market Sentiment

TrendBullish

VolatilityMedium

VolumeHigh

MomentumStrong

SignalBuy

Installation

npx dedevs-ui@latest add defi-chart

Features

Candlestick Visualization: Professional OHLC (Open, High, Low, Close) chart display
Real-time Data: Live market data with automatic updates
Interactive Tooltips: Detailed price information on hover
Reference Lines: Current price indicators with color-coded trends
Responsive Design: Adapts to different screen sizes and containers
Custom Styling: Professional trading interface appearance
Time-based X-axis: Smart date formatting with monthly labels
Dynamic Scaling: Automatic Y-axis scaling based on data range

Examples

Basic Usage

Advanced Integration

The main example demonstrates a comprehensive trading interface with:

Trading pair selection and price information
Multiple timeframe controls (1H, 4H, 1D, 1W, 1M)
Chart comparison views (Single, Comparison, Portfolio)
Technical analysis indicators
Market sentiment analysis
Real-time price updates

Component Structure

The CandlestickChart component includes:

Chart Container: Responsive wrapper with proper aspect ratio
Candlestick Bars: OHLC data visualization with color coding
Grid Lines: Horizontal and vertical reference lines
Tooltips: Interactive data display on hover
Reference Lines: Current price indicators
Axis Labels: Time-based X-axis and price Y-axis

Usage Examples

Basic Chart

import { CandlestickChart } from '@repo/defi/chart';

export function TradingChart() {
  return (
    <div className="w-full h-96">
      <CandlestickChart />
    </div>
  );
}

With Controls

import { CandlestickChart } from '@repo/defi/chart';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { Button } from '@/components/ui/button';
import { useState } from 'react';

export function ChartWithControls() {
  const [timeframe, setTimeframe] = useState('1d');
  
  return (
    <Card>
      <CardHeader>
        <div className="flex items-center justify-between">
          <CardTitle>ETH/USD Chart</CardTitle>
          <div className="flex gap-2">
            {['1H', '4H', '1D', '1W'].map((tf) => (
              <Button
                key={tf}
                variant={timeframe === tf.toLowerCase() ? 'default' : 'outline'}
                size="sm"
                onClick={() => setTimeframe(tf.toLowerCase())}
              >
                {tf}
              </Button>
            ))}
          </div>
        </div>
      </CardHeader>
      <CardContent>
        <div className="h-96">
          <CandlestickChart key={timeframe} />
        </div>
      </CardContent>
    </Card>
  );
}

Portfolio View

import { CandlestickChart } from '@repo/defi/chart';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';

const assets = [
  { symbol: 'ETH/USD', price: '$2,345.67' },
  { symbol: 'BTC/USD', price: '$43,567.89' },
  { symbol: 'SOL/USD', price: '$98.45' }
];

export function PortfolioCharts() {
  return (
    <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
      {assets.map((asset) => (
        <Card key={asset.symbol}>
          <CardHeader className="pb-2">
            <CardTitle className="text-sm">{asset.symbol}</CardTitle>
            <div className="text-lg font-bold">{asset.price}</div>
          </CardHeader>
          <CardContent>
            <div className="h-32">
              <CandlestickChart />
            </div>
          </CardContent>
        </Card>
      ))}
    </div>
  );
}

Data Structure

The chart uses candlestick data with the following structure:

interface CandlestickData {
  date: string;              // ISO date string
  openClose: [number, number]; // [open, close] prices
  high: number;              // Highest price
  low: number;               // Lowest price
}