3D Candlestick Chart — Integration and Implementation

Step 1: Include the Script

Add the following line in the head section or before the closing body tag:

<script src="https://ravenbits.com/build/ravenbits-charts.js" type="module"></script>

Step 2: Add the Candlestick Chart Component

Place the following HTML code where you want the candlestick chart to appear:

<div class="ravenbits-charts">
    <ravenbits-charts :options='{
        "chart": "candlestick",
        "data": {
            "categories": ["Sty", "Lut", "Mar", "Kwi", "Maj"],
            "series": [
                {"open": 100, "high": 118, "low": 95,  "close": 112},
                {"open": 112, "high": 125, "low": 108, "close": 105},
                {"open": 105, "high": 115, "low": 98,  "close": 113},
                {"open": 113, "high": 130, "low": 110, "close": 128},
                {"open": 128, "high": 135, "low": 120, "close": 122}
            ]
        }
    }'></ravenbits-charts>
</div>

Data Format for the Candlestick Chart

Your JSON data should have the following structure — each candle is an object with open, high, low, close fields:

{
    "categories": ["Sty", "Lut", "Mar", "Kwi", "Maj"],
    "series": [
        {"open": 100, "high": 118, "low": 95,  "close": 112},
        {"open": 112, "high": 125, "low": 108, "close": 105},
        {"open": 105, "high": 115, "low": 98,  "close": 113},
        {"open": 113, "high": 130, "low": 110, "close": 128},
        {"open": 128, "high": 135, "low": 120, "close": 122}
    ]
}

Chart Options

The "options" field lets you customize candle colors and the legend:

"options": {
    "bullColor": "#14b8a6",  // color of bullish candle (close >= open)
    "bearColor": "#f97316",  // color of bearish candle (close < open)
    "bullLabel": "Bullish",   // legend label for bullish (optional)
    "bearLabel": "Bearish"    // legend label for bearish (optional)
}

You can also set "color" per candle to highlight a specific period:

"series": [
    {"open": 100, "high": 118, "low": 95, "close": 112, "color": "#6366f1"},
    {"open": 112, "high": 125, "low": 108, "close": 105}
]

Data Source Options

You can provide data in three ways:

Option A: Inline JSON

"data": {
    "categories": [...],
    "series": [{"open": ..., "high": ..., "low": ..., "close": ...}, ...]
}

Option B: External JSON File

"data": "https://ravenbits.com/candlestick.json"

The JSON file format should match the required candlestick chart structure.

Option C: API Endpoint

"data": "https://ravenbits.com/api/candlestickChartSampleJson"

The API endpoint must return data in JSON format matching the required candlestick chart structure.

Candlestick Chart Use Cases

• Stock market — share prices across trading sessions
• Cryptocurrencies — price volatility analysis
• Forex market — currency pair exchange rates
• Commodities — oil, gold, silver prices
• Technical analysis — identifying trends and formations