Gauge Vue Component

Gauge Components
Gauge Properties
Examples

Framework7 comes with Gauge component. It produces nice looking fully responsive SVG gauges.

Gauge Components

There are following components included:

f7-gauge

Gauge Properties

Prop	Type	Default	Description
id	string		Gauge element ID attribute
type	string	circle	Gauge type. Can be `circle` or `semicircle`
value	number	0	Gauge value/percentage. Must be a number between `0` and `1`
size	number	200	Generated SVG image size (in px)
bg-color	string	transparent	Gauge background color. Can be any valid color string, e.g. `#ff00ff`, `rgb(0,0,255)`, etc.
border-bg-color	string	#eeeeee	Main border/stroke background color
border-color	string	#000000	Main border/stroke color
border-width	string	10	Main border/stroke width
value-text	string	null	Gauge value text (large text in the center of gauge)
value-text-color	string	#000000	Value text color
value-font-size	string	31	Value text font size
value-font-weight	string	500	Value text font weight
label-text	string	null	Gauge additional label text
label-text-color	string	#888888	Label text color
label-font-size	string	14	Label text font size
label-font-weight	string	400	Label text font weight

Examples

<template>
  <f7-page>
    <f7-navbar title="Gauge"></f7-navbar>

    <f7-block strong class="text-align-center">
      <f7-gauge
        type="circle"
        :value="gaugeValue"
        :size="250"
        border-color="#2196f3"
        :border-width="10"
        :value-text="`${gaugeValue * 100}%`"
        :value-font-size="41"
        value-text-color="#2196f3"
        label-text="amount of something"
      ></f7-gauge>
      <f7-segmented tag="p" raised>
        <f7-button @click="() => gaugeValue = 0">0%</f7-button>
        <f7-button @click="() => gaugeValue = 0.25">25%</f7-button>
        <f7-button @click="() => gaugeValue = 0.5">50%</f7-button>
        <f7-button @click="() => gaugeValue = 0.75">75%</f7-button>
        <f7-button @click="() => gaugeValue = 1">100%</f7-button>
      </f7-segmented>
    </f7-block>

    <f7-block-title>Circle Gauges</f7-block-title>
    <f7-block strong>
      <f7-row>
        <f7-col class="text-align-center">
          <f7-gauge
            type="circle"
            :value="0.44"
            value-text="44%"
            value-text-color="#ff9800"
            border-color="#ff9800"
          ></f7-gauge>
        </f7-col>
        <f7-col class="text-align-center">
          <f7-gauge
            type="circle"
            :value="0.12"
            value-text="$120"
            value-text-color="#4caf50"
            border-color="#4caf50"
            label-text="of $1000 budget"
            label-text-color="#f44336"
            :label-font-weight="700"
          ></f7-gauge>
        </f7-col>
      </f7-row>
    </f7-block>

    <f7-block-title>Semicircle Gauges</f7-block-title>
    <f7-block strong>
      <f7-row>
        <f7-col class="text-align-center">
          <f7-gauge
            type="semicircle"
            :value="0.3"
            value-text="30%"
            value-text-color="#f44336"
            border-color="#f44336"
          ></f7-gauge>
        </f7-col>
        <f7-col class="text-align-center">
          <f7-gauge
            type="semicircle"
            :value="0.5"
            value-text="30kg"
            value-text-color="#e91e63"
            border-color="#e91e63"
            label-text="of 60kg total"
            label-text-color="#333"
          ></f7-gauge>
        </f7-col>
      </f7-row>
    </f7-block>

    <f7-block-title>Customization</f7-block-title>
    <f7-block strong>
      <f7-row>
        <f7-col class="text-align-center">
          <f7-gauge
            type="circle"
            :value="0.35"
            value-text="35%"
            value-text-color="#4caf50"
            :valueFontSize="51"
            :valueFontWeight="700"
            :border-width="20"
            border-color="#4caf50"
            border-bg-color="#ffeb3b"
            bg-color="#ffeb3b"
          ></f7-gauge>
        </f7-col>
        <f7-col class="text-align-center">
          <f7-gauge
            type="circle"
            :value="0.67"
            value-text="$670"
            value-text-color="#000"
            border-color="#ff9800"
            label-text="of $1000 spent"
            label-text-color="#4caf50"
            :label-font-weight="800"
            :label-font-size="12"
            :border-width="30"
          ></f7-gauge>
        </f7-col>
      </f7-row>
      <br />
      <f7-row>
        <f7-col class="text-align-center">
          <f7-gauge
            type="semicircle"
            :value="0.5"
            value-text="50%"
            value-text-color="#ffeb3b"
            :valueFontSize="41"
            :valueFontWeight="700"
            :border-width="10"
            border-color="#ffeb3b"
            border-bg-color="transparent"
          ></f7-gauge>
        </f7-col>
        <f7-col class="text-align-center">
          <f7-gauge
            type="semicircle"
            :value="0.77"
            border-color="#ff9800"
            label-text="$770 spent so far"
            label-text-color="#ff9800"
            :label-font-weight="800"
            :label-font-size="12"
            :border-width="10"
          ></f7-gauge>
        </f7-col>
      </f7-row>
    </f7-block>
  </f7-page>
</template>

<script>
  export default {
    data() {
      return {
        gaugeValue: 0.5,
      };
    },
  };
</script>