https://github.com/ngyewch/chartjs-v4-webcomponent

Simple web component for displaying Chart.js v4 charts
https://github.com/ngyewch/chartjs-v4-webcomponent

chart chartjs webcomponent

Last synced: 3 days ago
JSON representation

Simple web component for displaying Chart.js v4 charts

• Host: GitHub
• URL: https://github.com/ngyewch/chartjs-v4-webcomponent
• Owner: ngyewch
• License: mit
• Created: 2024-09-07T08:15:08.000Z (27 days ago)
• Default Branch: main
• Last Pushed: 2024-09-21T09:43:36.000Z (12 days ago)
• Last Synced: 2024-09-26T17:11:52.342Z (7 days ago)
• Topics: chart, chartjs, webcomponent
• Language: TypeScript
• Homepage: https://ngyewch.github.io/chartjs-v4-webcomponent/
• Size: 1.12 MB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
[![npm](https://img.shields.io/npm/v/@ngyewch/chartjs-v4-webcomponent)](https://www.npmjs.com/package/@ngyewch/chartjs-v4-webcomponent)

![GitHub Workflow Status](https://img.shields.io/github/actions/workflow/status/ngyewch/chartjs-v4-webcomponent/CI.yml)

![GitHub last commit](https://img.shields.io/github/last-commit/ngyewch/chartjs-v4-webcomponent)

# chartjs-v4-webcomponent

Simple web component for displaying [Chart.js](https://www.chartjs.org/) v4 charts.

## Usage

### Import

Script tag:

```

```

### Markup

```

    

        

            {

                "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

                        }

                    }

                }

            }

        

    

```