react cryptocurrency candlestickchart datavisualization

Tự Tay Xây Biểu Đồ Nến Tiền Điện Tử Realtime Bằng React và TypeScript

Lê Lân

17/06/2025

Hướng Dẫn Xây Dựng Biểu Đồ Nến Thời Gian Thực Cho Giá Tiền Ảo Từ Đầu

Mở Đầu

Biểu đồ nến là công cụ không thể thiếu trong phân tích kỹ thuật của thị trường tài chính, đặc biệt là tiền điện tử.

Trong bài viết này, chúng ta sẽ cùng nhau xây dựng một biểu đồ nến (candlestick chart) tùy chỉnh, có khả năng cập nhật dữ liệu thời gian thực từ thị trường tiền mã hóa, cụ thể là Bitcoin (BTC), mà không cần phụ thuộc vào thư viện biểu đồ bên ngoài. Bạn sẽ học được cách lấy dữ liệu, xử lý, và trực quan hoá một cách chi tiết, từ việc thiết lập API lấy dữ liệu, xử lý cấu trúc dữ liệu cho đến xây dựng các thành phần giao diện tương tác.

Nội dung bài viết gồm các phần chính sau:

Giới thiệu dự án demo và cách fetch dữ liệu

Thiết kế cấu trúc dữ liệu và tích hợp API Binance

Các thành phần biểu đồ như trục X, Y, nến, tooltip tương tác

Tối ưu hoá bố cục và hiệu năng

Hãy cùng khám phá cách thực hiện từng bước chi tiết để bạn có thể tự xây dựng biểu đồ cho riêng mình!

Giới Thiệu Dự Án Demo và Fetch Dữ Liệu

Tạo Component Demo

Chúng ta sẽ tạo một component React có tên CandlestickDemo dùng để lấy dữ liệu giá BTC trong 24 tuần gần nhất và hiển thị dưới dạng biểu đồ nến.

import { useAssetPriceCandlesQuery } from "@lib/chain-ui/queries/useAssetPriceCandlesQuery"
import { MatchQuery } from "@lib/ui/query/components/MatchQuery"
import { Text } from "@lib/ui/text"
import { getErrorMessage } from "@lib/utils/getErrorMessage"
import { CandlestickChart } from "./chart/CandlestickChart"

export const CandlestickDemo = () => {
  const query = useAssetPriceCandlesQuery({
    id: "BTC",
    limit: 24,
    candleDuration: { value: 1, unit: "w" },
  })

  return (
    <MatchQuery
      value={query}
      success={(value) => <CandlestickChart value={value} />}
      error={(error) => <Text>Failed to fetch data: {getErrorMessage(error)}</Text>}
      pending={() => <Text>Loading...</Text>}
    />
  )
}

Thiết Lập Hooks Fetch Dữ Liệu

Hook useAssetPriceCandlesQuery sử dụng React Query để cache, quản lý trạng thái và từng lỗi fetch dữ liệu. Nó bọc hàm getAssetPriceCandles thực hiện lấy dữ liệu từ API.

import { useQuery } from "@tanstack/react-query"
import { getAssetPriceCandles } from "../../chain/trading/getAssetPriceCandles"
import { GetAssetPriceCandlesInput } from "../../chain/trading/getAssetPriceCandles"

export const useAssetPriceCandlesQuery = (input: GetAssetPriceCandlesInput) => {
  return useQuery({
    queryKey: ["asset-price-candles", input],
    queryFn: () => getAssetPriceCandles(input),
  })
}

Sử dụng React Query giúp bạn không phải tự quản lý trạng thái load và lỗi, tăng tính ổn định cho ứng dụng.

Định Nghĩa Cấu Trúc Dữ Liệu Biểu Đồ Nến

Trước khi vẽ biểu đồ, ta cần xác định cấu trúc dữ liệu mô tả mỗi cây nến gồm 4 điểm giá: mở (open), cao (high), thấp (low), đóng (close) cùng thời gian bắt đầu.

export const priceCandlePriceFields = ["open", "high", "low", "close"] as const
export type PriceCandlePriceField = (typeof priceCandlePriceFields)[number]
export type PriceCandlePriceFields = Record<PriceCandlePriceField, number>

export type PriceCandle = PriceCandlePriceFields & {
  startTime: number // đơn vị milliseconds
}

Ý Nghĩa Các Trường

open : Giá mở cửa của khoảng thời gian nến

high : Giá cao nhất

low : Giá thấp nhất

close : Giá đóng cửa

startTime : Thời điểm bắt đầu thanh nến

Định nghĩa rõ ràng này giúp xử lý và vẽ biểu đồ chính xác cũng như dễ dàng bảo trì code.

Tích Hợp API Binance Lấy Dữ Liệu Giá Tiền Ảo

Định Nghĩa Kiểu Interval Nến

API Binance chỉ hỗ trợ các khoảng thời gian cố định. Chúng ta khai báo type TypeScript cho các khoảng này:

export type CandleDuration =
  | { value: 1; unit: "min" }
  | { value: 3; unit: "min" }
  | { value: 5; unit: "min" }
  | { value: 15; unit: "min" }
  | { value: 30; unit: "min" }
  | { value: 1; unit: "h" }
  | { value: 2; unit: "h" }
  | { value: 4; unit: "h" }
  | { value: 6; unit: "h" }
  | { value: 8; unit: "h" }
  | { value: 12; unit: "h" }
  | { value: 1; unit: "d" }
  | { value: 3; unit: "d" }
  | { value: 1; unit: "w" }

Chuyển Đổi Khoảng Thời Gian Cho API

Hàm chuyển đổi một đối tượng CandleDuration thành chuỗi như 1m , 1h , 1w theo yêu cầu của API Binance.

const binanceUnitMap = {
  min: "m",
  h: "h",
  d: "d",
  w: "w",
}

const toBinanceInterval = (duration: CandleDuration): string => {
  const apiUnit = binanceUnitMap[duration.unit]
  if (!apiUnit) throw new Error(`Unsupported duration unit: ${duration.unit}`)
  return `${duration.value}${apiUnit}`
}

Hàm Lấy Dữ Liệu Nến Từ Binance

Hàm getAssetPriceCandles thực hiện:

Biến đổi id thành cặp giao dịch (ví dụ: BTCUSDT)

Thêm các tham số truy vấn như khoảng thời gian, limit

Gửi request về API

Biến đổi dữ liệu thô thành mảng PriceCandle

export const getAssetPriceCandles = async ({
  id,
  startTime,
  endTime,
  candleDuration,
  limit = 1000,
}: GetAssetPriceCandlesInput): Promise<PriceCandle[]> => {
  const symbol = `${id.toUpperCase()}USDT`
  const url = addQueryParams(baseUrl, withoutUndefinedFields({
    symbol,
    interval: toBinanceInterval(candleDuration),
    startTime,
    endTime,
    limit,
  }))

  const klines = await queryUrl<KlineData[]>(url.toString())
  return order(
    klines.map((kline) => ({
      startTime: kline[0],
      open: parseFloat(kline[1]),
      high: parseFloat(kline[2]),
      low: parseFloat(kline[3]),
      close: parseFloat(kline[4]),
    })),
    (o) => o.startTime,
    "asc"
  )
}

Sử dụng TypeScript discriminated unions đảm bảo các tham số interval phù hợp với API, tránh lỗi runtime.

Xây Dựng Các Thành Phần Biểu Đồ

Cấu Trúc Tổng Quan

Biểu đồ bao gồm:

Trục Y với các nhãn giá được sinh tự động

Trục X hiển thị mốc thời gian

Các cây nến thể hiện dao động giá

Thanh hover và tooltip hiển thị chi tiết khi rê chuột

Tạo Component `CandlestickChart`

Component nhận vào mảng dữ liệu PriceCandle[] , xử lý chuẩn hoá để biểu diễn và giữ trạng thái cây nến được chọn để hiển thị tooltip.

Sinh Nhãn Trục Y

Hàm generateYLabels tự động tính toán khoảng cách các nhãn trên trục Y dựa vào dải giá trị trong dataset, sử dụng các bước giá phổ biến (1, 2, 2.5, 5, 10) và tỉ lệ phù hợp.

export const generateYLabels = ({ data, minLabels = 4, maxLabels = 6 }: Input): number[] => {
  // logic tính toán step size, boundary min-max
  // trả về mảng các giá trị cho trục Y
}

Chuẩn Hoá Dữ Liệu Cho Vị Trí Tương Đối

Dữ liệu từng trường giá được chuẩn hoá về khoảng 0-1 để dễ dàng áp dụng CSS với % thay vì tuyệt đối.

export const normalizeDataArrays = <T extends Record<string, number[]>>(input: T): T => {
  const values = Object.values(input).flat()
  const max = Math.max(...values)
  const min = Math.min(...values)
  const range = max - min
  return Object.fromEntries(
    Object.entries(input).map(([key, value]) => [
      key,
      value.map((v) => (v - min) / range),
    ])
  ) as T
}

Thành Phần Cây Nến `Candlestick`

Thân cây (body) biểu diễn giá mở và giá đóng

Đuôi cây (tail) biểu diễn khoảng biến động giá cao-thấp

Màu sắc xanh đỏ tùy biến theo tăng giảm giá

Khi hover sẽ hiển thị chỉ báo tiện lợi

export const Candlestick = ({ value, isActive }: CandlestickProps) => {
  const isBullish = value.close > value.open
  const background = isBullish ? "green" : "red"

  return (
    <Container>
      {isActive && <Indicator />}
      <Tail style={{ background, height: toPercents(value.high - value.low), bottom: toPercents(value.low) }} />
      <Body style={{ background, height: toPercents(Math.abs(value.close - value.open)), bottom: toPercents(Math.min(value.close, value.open)) }} />
    </Container>
  )
}

Tooltip Tương Tác `CandlestickInfo`

Sử dụng thư viện Floating UI để position tooltip chính xác theo vị trí chuột, hiển thị ngày tháng cùng chi tiết 4 giá OHLC.

export const CandlestickInfo = ({ position, value }: CandlestickInfoProps) => {
  // setup floating UI, cập nhật vị trí
  // rendering tooltip kiểu bảng thông tin giá chi tiết
}

Trục X Thông Minh `ChartXAxis`

Xử lý vị trí nhãn trục X động để tránh chồng chéo, tùy vào độ rộng và số lượng dữ liệu hiển thị.

Kỹ thuật này giúp chart luôn gọn gàng, dễ đọc dù thay đổi dữ liệu hay kích thước.

Tối Ưu Bố Cục và Các Tiện Ích Hỗ Trợ

Bố Cục Lưới Linh Hoạt `UniformColumnGrid`

Sử dụng CSS Grid với thiết lập tự động về số cột, độ rộng cột tùy biến giúp biểu đồ có thể co giãn theo kích thước màn hình hoặc container.

Công Cụ Định Vị và Theo Dõi Chuột

Component HoverTracker xử lý sự kiện chuột, ánh xạ tọa độ chuột sang chỉ số cây nến, kích hoạt tooltip hiệu quả.

Cấu Hình Trung Tâm `chartConfig`

Tất cả thông số về độ cao, chiều rộng label, khoảng cách được tập trung để dễ bảo trì và chỉnh sửa.

export const chartConfig = {
  chartHeight: 600,
  yLabelsWidth: 58,
  xLabelsHeight: 18,
  xLabelsWidth: 80,
  xLabelsMinDistance: 20,
  tailWidth: 1,
}

Kết Luận

Chúng ta đã cùng nhau xây dựng một biểu đồ nến thời gian thực cho tiền mã hóa từ đầu, không dùng thư viện đồ hoạ ngoài.

Kết quả là một giải pháp linh hoạt, nhẹ nhàng, dễ mở rộng và dễ hiểu toàn bộ quy trình xử lý dữ liệu và dựng hình. Đây cũng là sự học hỏi quý giá về thiết kế UI tương tác, xử lý dữ liệu lớn và chuẩn hoá setup.

Bạn có thể áp dụng cá nhân hoá thêm cho nhiều loại biểu đồ khác hoặc tích hợp sâu hơn với các API tài chính khác.

Hãy thử ngay và ghi nhận sự khác biệt khi tự mình xây dựng công cụ visualization hiệu quả và toàn quyền kiểm soát!

Tham Khảo

Binance API Documentation: https://binance-docs.github.io/apidocs/spot/en/#kline-candlestick-data

React Query Official Site: https://tanstack.com/query/latest

Floating UI Docs: https://floating-ui.com/

Date-fns Library: https://date-fns.org/

RadzionC GitHub Repository: https://github.com/radzionc/radzionkit