Pie Chart Integration

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

Place the following HTML code where you want to display the pie 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>

Data Format for Pie Chart

Your JSON data should have the following structure:

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

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"

Pie Chart Use Cases

• Investment portfolio structure - visualization of asset allocation by class
• Customer segmentation - division of customer base by demographics
• Budget analysis - presentation of revenue or expense structure
• Market shares - comparison of different companies' shares in the market
• Website traffic sources - visualization of user acquisition channels