JSON Chart Viewer Examples
MohaNed Ghawar
Full Stack Developer | Open Source Contributor
Experience the power of JSON Chart Viewer with this comprehensive example showcasing all available features.
The chart updates automatically every 30 seconds and demonstrates the full range of visualization capabilities.
Using live product data from Platzi Fake Store API:
https://api.escuelajs.co/api/v1/products
🎯 Interactive Features
- Fullscreen Mode: Click the expand button ↗ or press ESC to exit
- Zoom: Use mouse wheel or pinch gesture
- Pan: Click and drag on chart area
- Reset View: Double-click to reset zoom and pan
Available Features
- Multiple chart types (bar, line, pie, doughnut)
- Auto-refresh data every 30 seconds
- Custom title and axis labels
- Toggleable data labels
- Configurable grid lines
- Adjustable legend position
- Custom color picker
- Zoom and pan controls
- Fullscreen mode
- Dark theme support
- Responsive design
- Field mapping
Implementation Code
<json-chart-viewer
data-url="https://api.escuelajs.co/api/v1/products"
refresh-interval="30000"
chart-type="bar"
chart-title="Product Price Distribution"
x-label="Product Name"
y-label="Price ($)"
show-data-labels="true"
show-grid="true"
legend-position="right"
chart-color="#2196F3"
zoom-enabled="true"
theme="dark"
default-x="title"
default-y="price">
</json-chart-viewer>