chartjs-v4-webcomponent

Simple web component for displaying Chart.js v4 charts.

Usage

Import

Script tag:

<script type="module" src="https://cdn.jsdelivr.net/npm/@ngyewch/[email protected]/dist/chartjs-v4-webcomponent.js"></script>

Markup

    <chartjs-v4>
        <script type="application/json">
            {
                "type": "bar",
                "data": {
                    "labels": ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul"],
                    "datasets": [
                        {
                            "label": "My First Dataset",
                            "data": [65, 59, 80, 81, 56, 55, 40]
                        }
                    ]
                },
                "options": {
                    "maintainAspectRatio": false,
                    "scales": {
                        "y": {
                            "beginAtZero": true
                        }
                    }
                }
            }
        </script>
    </chartjs-v4>