How to Build Crypto Price Charts Using OHLC Data

Introduction

In this tutorial, you’ll learn how to build interactive cryptocurrency price charts using OHLC (Open, High, Low, Close) data from the Moralis API. We’ll use the Lightweight Charts library from TradingView to create professional-looking candlestick charts that can be embedded in any web application. We’ll use the following Moralis API endpoint:

Get OHLCV Data - Fetch historical candlestick price data for token pairs

Prerequisites

Node.js v18+ installed
A Moralis API key (get one free)
Basic HTML/JavaScript knowledge

Step 1: Set Up Your Project

Create a new directory and files:

mkdir crypto-charts && cd crypto-charts
npm init -y

Step 2: Create the HTML File

Create an index.html file:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Crypto Price Chart</title>
  <script src="https://unpkg.com/[email protected]/dist/lightweight-charts.standalone.production.js"></script>
  <style>
    body {
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
      margin: 0;
      padding: 20px;
      background: #1a1a2e;
      color: #fff;
    }
    #chart {
      width: 100%;
      height: 500px;
    }
  </style>
</head>
<body>
  <h1>ETH/USDC Price Chart</h1>
  <div id="chart"></div>
  <script src="chart.js"></script>
</body>
</html>

Step 3: Create the JavaScript File

Create a chart.js file:

const API_KEY = 'YOUR_API_KEY';
const PAIR_ADDRESS = '0x88e6a0c2ddd26feeb64f039a2c41296fcb3f5640'; // WETH/USDC on Uniswap V3

async function initChart() {
  const chartContainer = document.getElementById('chart');

  const chart = LightweightCharts.createChart(chartContainer, {
    layout: {
      background: { color: '#1a1a2e' },
      textColor: '#d1d4dc',
    },
    grid: {
      vertLines: { color: '#2a2a4e' },
      horzLines: { color: '#2a2a4e' },
    },
  });

  const candleSeries = chart.addCandlestickSeries({
    upColor: '#26a69a',
    downColor: '#ef5350',
    borderUpColor: '#26a69a',
    borderDownColor: '#ef5350',
    wickUpColor: '#26a69a',
    wickDownColor: '#ef5350',
  });

  // Required: specify date range for OHLC data
  const fromDate = new Date(Date.now() - 30 * 24 * 60 * 60 * 1000).toISOString();
  const toDate = new Date().toISOString();

  const response = await fetch(
    `https://deep-index.moralis.io/api/v2.2/pairs/${PAIR_ADDRESS}/ohlcv?chain=eth&timeframe=1d&from_date=${fromDate}&to_date=${toDate}`,
    {
      headers: { 'X-API-Key': API_KEY },
    }
  );

  const data = await response.json();

  const candleData = data.result
    .map((candle) => ({
      time: Math.floor(new Date(candle.timestamp).getTime() / 1000),
      open: candle.open,
      high: candle.high,
      low: candle.low,
      close: candle.close,
    }))
    .sort((a, b) => a.time - b.time);

  candleSeries.setData(candleData);
  chart.timeScale().fitContent();
}

initChart();

Replace YOUR_API_KEY with your actual Moralis API key.

Step 4: Run the Chart

Open index.html in your browser, or serve it with a simple HTTP server:

npx serve .

Example OHLC Response

{
  "pair_address": "0x88e6a0c2ddd26feeb64f039a2c41296fcb3f5640",
  "result": [
    {
      "timestamp": "2024-01-15T00:00:00.000Z",
      "open": 3450.25,
      "high": 3475.50,
      "low": 3445.00,
      "close": 3468.75,
      "volume": 15234567.89
    }
  ]
}

Understanding the Response

Field	Description
`timestamp`	The start time of the candle
`open`	Opening price for the period
`high`	Highest price during the period
`low`	Lowest price during the period
`close`	Closing price for the period
`volume`	Trading volume in USD

Next Steps

Get OHLC Data - Learn about OHLC data
Get Token Price - Get current prices
Build a DEX Screener - Build a trading dashboard
API Reference - Full API documentation

​Introduction

​Prerequisites

​Step 1: Set Up Your Project

​Step 2: Create the HTML File

​Step 3: Create the JavaScript File

​Step 4: Run the Chart

​Example OHLC Response

​Understanding the Response

​Next Steps