3D Bar Chart — Integration and Implementation 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 Bar Chart Component

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

<div class="ravenbits-charts">
    <ravenbits-charts :options='{
        "chart": "bar",
        "data": {
            "categories": ["Q1", "Q2", "Q3", "Q4"],
            "series": [{
                    "name": "Revenue",
                    "values": [120, 150, 180, 210],
                    "color": "blue"
                },
                {
                    "name": "Costs",
                    "values": [80, 100, 110, 130],
                    "color": "green"
                }
            ],
            "options": {
                "stacked": false,
                "horizontal": true,
                "showValues": true
            }
        }
    }'></ravenbits-charts>
</div>

Data Format for Bar Chart

Your JSON data should have the following structure:

{
    "categories": ["Q1", "Q2", "Q3", "Q4"],
    "series": [
        {
            "name": "Revenue",
            "values": [120, 150, 180, 210],
            "color": "blue"
        },
        {
            "name": "Costs",
            "values": [80, 100, 110, 130],
            "color": "green"
        }
    ],
    "options": {
        "stacked": false,
        "horizontal": true,
        "showValues": true
    }
}

Data Source Options

You can provide data for the bar chart in three different ways:

Option A: Inline JSON

"data": {
                "categories": ["Q1", "Q2", "Q3", "Q4"],
                "series": [{
                        "name": "Revenue",
                        "values": [120, 150, 180, 210],
                        "color": "blue"
                    },
                    {
                        "name": "Costs",
                        "values": [80, 100, 110, 130],
                        "color": "green"
                    }
                ]
            }

Option B: External JSON File

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

The JSON file format should conform to the required bar chart structure.

Option C: API Endpoint

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

The API endpoint must return data in JSON format conforming to the required bar chart structure.

Bar Chart Use Cases

• Sales analysis - comparison of sales results across different periods
• Metrics comparison - juxtaposition of different business indicators
• Demographic analysis - comparison of demographic data
• Rankings - presentation of rankings, e.g., best-selling products
• Budget analysis - comparison of planned and actual costs