> ## Documentation Index
> Fetch the complete documentation index at: https://docs.moralis.com/llms.txt
> Use this file to discover all available pages before exploring further.
# How to Build Crypto Price Charts Using OHLC Data
> Learn how to create interactive candlestick price charts using OHLC data from the Moralis API.
## 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](/data-api/evm/price/ohlc) - Fetch historical candlestick price data for token pairs
## Prerequisites
* Node.js v18+ installed
* A Moralis API key ([get one free](https://admin.moralis.io))
* Basic HTML/JavaScript knowledge
## Step 1: Set Up Your Project
Create a new directory and files:
```bash theme={null}
mkdir crypto-charts && cd crypto-charts
npm init -y
```
## Step 2: Create the HTML File
Create an `index.html` file:
```html theme={null}
Crypto Price Chart
ETH/USDC Price Chart
```
## Step 3: Create the JavaScript File
Create a `chart.js` file:
```javascript theme={null}
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:
```bash theme={null}
npx serve .
```
## Example OHLC Response
```json theme={null}
{
"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](/get-started/tutorials/data-api/prices-and-charts/get-historical-erc-20-token-prices-ohlc-data) - Learn about OHLC data
* [Get Token Price](/get-started/tutorials/data-api/prices-and-charts/get-the-price-of-an-erc-20-token) - Get current prices
* [Build a DEX Screener](/get-started/tutorials/data-api/tokens-and-markets/build-a-dex-screener-clone) - Build a trading dashboard
* [API Reference](/data-api/evm/price/ohlc) - Full API documentation