1.0.0 • Published 9 months ago
@e-mohaned-ghawar/json-chart-viewer v1.0.0
JSON Chart Viewer Web Component
A powerful and customizable web component for visualizing JSON data as interactive charts. Created by MohaNed Ghawar.
Features
- Multiple chart types (bar, line, pie, doughnut)
- Auto-refresh data
- Custom titles and labels
- Data labels toggle
- Grid lines toggle
- Adjustable legend position
- Custom color picker
- Zoom and pan controls
- Fullscreen mode
- Dark/light theme support
- Responsive design
Installation
Via NPM
npm install @e-mohaned-ghawar/json-chart-viewerVia CDN
<script src="https://unpkg.com/@e-mohaned-ghawar/json-chart-viewer"></script>Usage
<json-chart-viewer
data-url="https://api.example.com/data"
refresh-interval="30000"
chart-type="bar"
chart-title="My Chart"
x-label="X Axis"
y-label="Y Axis"
show-data-labels="true"
show-grid="true"
legend-position="right"
chart-color="#2196F3"
zoom-enabled="true"
default-x="name"
default-y="value">
</json-chart-viewer>Attributes
| Attribute | Type | Default | Description |
|---|---|---|---|
| data-url | string | - | URL for JSON data source |
| refresh-interval | number | 0 | Auto-refresh interval in milliseconds |
| chart-type | string | 'bar' | Chart type (bar/line/pie/doughnut) |
| chart-title | string | 'Chart' | Main chart title |
| x-label | string | 'X Axis' | X-axis label |
| y-label | string | 'Y Axis' | Y-axis label |
| show-data-labels | boolean | false | Show data point labels |
| show-grid | boolean | true | Show grid lines |
| legend-position | string | 'right' | Legend position (top/right/bottom/left) |
| chart-color | string | '#2196F3' | Primary chart color |
| zoom-enabled | boolean | false | Enable zoom controls |
| default-x | string | - | Default X-axis field from JSON |
| default-y | string | - | Default Y-axis field from JSON |
| theme | string | 'light' | Color theme (light/dark) |
Interactive Features
- Fullscreen Mode: Click expand button or press ESC to exit
- Zoom: Mouse wheel or pinch gesture
- Pan: Click and drag on chart area
- Reset View: Double-click to reset zoom/pan
Dependencies
- Chart.js
- chartjs-plugin-datalabels
- chartjs-plugin-zoom
Contributing
Feel free to submit issues and pull requests on GitHub.
Author
MohaNed Ghawar
- Website: https://mohanedghawar.ly/
- GitHub: @MohanedGhawar2019
License
MIT License
1.0.0
9 months ago