Integration Guide

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 Chart Component

Place the following HTML code where you want to display the chart:

<div class="ravenbits-charts">
    <ravenbits-charts :options='{
        "chart": "pie",
        "data": {
            "categories": ["Technology", "Healthcare", "Energy", "Finance"],
            "values": [35, 25, 20, 20],
            "colors": ["#6366f1", "#14b8a6", "#f97316", "#9ca3af"]
        }
    }'></ravenbits-charts>
</div>

Step 3: Data Source Options

Choose one of these options to provide data to the chart:

Option A: Inline JSON

"data": {
    "categories": ["Technology", "Healthcare", "Energy", "Finance"],
    "values": [35, 25, 20, 20],
    "colors": ["#6366f1", "#14b8a6", "#f97316", "#9ca3af"]
}

Option B: External JSON File

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

Option C: API Endpoint

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

Available Chart Types

RavenBits offers various chart types. Check out our detailed guides: