Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/intevel/vue3-gauge-chart
⏲ Vue 3 wrapper around gauge-chart
https://github.com/intevel/vue3-gauge-chart
barometer chart gauge gauge-chart tachometer typescript vue vue3 vuejs wrapper
Last synced: 2 months ago
JSON representation
⏲ Vue 3 wrapper around gauge-chart
- Host: GitHub
- URL: https://github.com/intevel/vue3-gauge-chart
- Owner: Intevel
- License: mit
- Created: 2024-01-28T19:37:31.000Z (11 months ago)
- Default Branch: main
- Last Pushed: 2024-01-28T19:49:10.000Z (11 months ago)
- Last Synced: 2024-10-17T19:29:03.176Z (3 months ago)
- Topics: barometer, chart, gauge, gauge-chart, tachometer, typescript, vue, vue3, vuejs, wrapper
- Language: TypeScript
- Homepage:
- Size: 38.1 KB
- Stars: 4
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# vue3-gauge-chart ⏲
[![npm version][npm-version-src]][npm-version-href]
[![npm downloads][npm-downloads-src]][npm-downloads-href]
[![License][license-src]][license-href]⏲ Vue 3 wrapper around [gauge-chart](https://github.com/greetclock/gauge-chart)
## Install
```sh
# Using npm
npm install vue3-gauge-chart# Using yarn
yarn add vue3-gauge-chart
```## Usage
```vue [example.vue]
import { GaugeMeter, GaugeMeterOptions } from "vue3-gauge-chart";
const options: GaugeMeterOptions = {
areaWidth: 600,
hasNeedle: true,
needleColor: "black",
arcColors: ["rgb(255, 84, 84)", "rgb(239, 214, 19)", "rgb(61, 204, 91)"],
arcDelimiters: [40, 60],
rangeLabel: ["50", "300"],
needleStartValue: 100,
centralLabel: "Bar",
needleValue: 100,
};
```
## License
Published under MIT - Made with ❤️ by Conner Bachmann
[npm-version-src]: https://img.shields.io/npm/v/vue3-gauge-chart/latest.svg
[npm-version-href]: https://npmjs.com/package/vue3-gauge-chart
[npm-downloads-src]: https://img.shields.io/npm/dt/vue3-gauge-chart.svg
[npm-downloads-href]: https://npmjs.com/package/vue3-gauge-chart
[license-src]: https://img.shields.io/npm/l/vue3-gauge-chart.svg
[license-href]: https://npmjs.com/package/vue3-gauge-chart