Skip to main content

​
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/lightweight-charts@4.1.0/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

FieldDescription
timestampThe start time of the candle
openOpening price for the period
highHighest price during the period
lowLowest price during the period
closeClosing price for the period
volumeTrading volume in USD

​
Next Steps