3D Line 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 Line Chart Component

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

<div class="ravenbits-charts">
    <ravenbits-charts :options='{
        "chart": "line",
        "data": {
            "categories": ["2020", "2021", "2022", "2023", "2024"],
            "series": [{
                    "name": "Revenue",
                    "data": [120, 150, 130, 180, 210],
                    "color": "#6366f1"
                },
                {
                    "name": "Costs",
                    "data": [80, 100, 95, 110, 130],
                    "color": "#14b8a6"
                }
            ]
        }
    }'></ravenbits-charts>
</div>

Data Format for Line Chart

Your JSON data should have the following structure:

{
    "categories": ["2020", "2021", "2022", "2023", "2024"],
    "series": [
        {
            "name": "Revenue",
            "data": [120, 150, 130, 180, 210],
            "color": "#6366f1"
        },
        {
            "name": "Costs",
            "data": [80, 100, 95, 110, 130],
            "color": "#14b8a6"
        }
    ]
}

Chart Options

The "options" field lets you customize the appearance and behavior of the line chart:

"options": {
    "showPoints": true,   // true (default) - show data point spheres
    "showValues": false,  // false (default) - always show value labels
    "dashed": false       // false (default) - make all lines dashed
}

The "dashed" option can also be set per-series to distinguish a specific line:

"series": [
    { "name": "...", "data": [...], "color": "#6366f1" },
    { "name": "...", "data": [...], "color": "#14b8a6", "dashed": true }
]

Data Source Options

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

Option A: Inline JSON

"data": {
    "categories": ["2020", "2021", "2022", "2023", "2024"],
    "series": [{
            "name": "Revenue",
            "data": [120, 150, 130, 180, 210],
            "color": "#6366f1"
        }
    ]
}

Option B: External JSON File

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

The JSON file format must match the required line chart data structure.

Option C: API Endpoint

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

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

Line Chart Use Cases

• Trend analysis - visualization of value changes over time
• Performance monitoring - tracking KPI metrics across periods
• Series comparison - juxtaposing multiple indicators on one chart
• Forecasting - presenting historical data alongside projections
• Business metrics - revenue, costs and margin over time