vue3-gauge-chart

vue3-gauge-chart ⏲

⏲ Vue 3 wrapper around gauge-chart

Install

# Using npm
npm install vue3-gauge-chart

# Using yarn
yarn add vue3-gauge-chart

Usage

<script setup lang="ts">
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,
};
</script>

<template>
  <div>
    <GaugeMeter :options="options" />
  </div>
</template>

License

Published under MIT - Made with ❤️ by Conner Bachmann