https://github.com/ganeshaampuh/web-component-gauge-chart
Web Component Gauge Chart
https://github.com/ganeshaampuh/web-component-gauge-chart
charts gauge-chart javascript svg web-component
Last synced: about 1 month ago
JSON representation
Web Component Gauge Chart
- Host: GitHub
- URL: https://github.com/ganeshaampuh/web-component-gauge-chart
- Owner: ganeshaampuh
- License: mit
- Created: 2024-09-07T14:02:27.000Z (9 months ago)
- Default Branch: main
- Last Pushed: 2024-09-11T14:33:22.000Z (8 months ago)
- Last Synced: 2025-03-25T21:51:11.440Z (about 2 months ago)
- Topics: charts, gauge-chart, javascript, svg, web-component
- Language: TypeScript
- Homepage: https://web-component-gauge-chart-demo.vercel.app/
- Size: 664 KB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Web Component Gauge Chart
A customizable gauge chart web component built with Stencil.js and D3.js.
## Usage
To use the web component in your HTML file, add the following script tag:
```html
```
Then, you can use the web component in your HTML file:
```html
document.querySelector('chart-gauge').settings = [
{
"name": "green",
"from": 0,
"to": 42,
"color": "#54bc3a"
},
{
"name": "yellow",
"from": 42,
"to": 58,
"color": "#dcdf0f"
},
{
"name": "red",
"from": 58,
"to": 80,
"color": "#de5354"
}
];
```
## Customization
You can customize the appearance of the gauge chart by passing the following properties:
- `width`: The width of the gauge chart.
- `value`: The value of the gauge chart.
- `label`: The label of the gauge chart.
- `distance`: The distance between the gauge chart and the label.
- `settings`: An array of objects defining the color ranges for the gauge chart. Each object should have the following properties:
- `name`: A descriptive name for the range (optional).
- `from`: The starting value of the range.
- `to`: The ending value of the range.
- `color`: The color to be used for this range (in hexadecimal format).
## License
This project is licensed under the MIT License. See the LICENSE file for more details.