Gauge Vue Component

    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>