Props

customCurrentValue

Current value of the gauge.

Type: Number
Default: 0

customStyle

A style values object for specifying size and color ​of the component.

Type: Object
Default: {}

• size

Width and height of the gauge in 'px'.

Type: Number
Default: 400

• mainBackgroundColor

Main background color of the component.

Type: String
Default: "#051226"

• borderColor

Border color of the outer gauge circle.

Type: String
Default: '#041326'

• scaleColor

The color of the scale lines.

Type: String
Default: '#B0CBE9'

• scaleValuesFontFamily

Font of the scale values.

Type: String
Default: 'Titillium Web', sans-serif'

Imported Google Font styles:

• 'Old Standard TT', serif
• 'Oswald', sans-serif
• 'Roboto', sans-serif
• 'Kameron', serif
• 'Copse', serif
• 'Lato', sans-serif
• 'Titillium Web', sans-serif

• scaleValuesColor

The color of the scale values.

Type: String
Default: '#B0CBE9'

• scaleStartValue

The initial value of the scale.

Type: Number
Default: 0

• scaleStep

Scale step between long lines.

Note

Cannot be 0 or negative value.

Type: Number
Default: 20

• animationTime

Animation time in seconds. The time the needle moves from initial value to current value.

Type: Number
Default: 1

• needleColor

The color of the gauge needle.

Type: String
Default: '#FE3816'

• needleCircleColor

The color of the small needle circle.

Type: String
Default: '#041326'

• needleCircleBorderColor

The color of the border of small needle circle.

Type: String
Default: '#62A6F1'

needleAnimation

Animation of needle. Moving from the initial value to current value. Can be disabled with 'false'.

Type: Boolean
Default: true

shadowFilter

Shadow of the scale values and needle circle.

Type: Boolean
Default: true

Example

<template>
  <div>
    <VueSpeedMeter
      :customCurrentValue="customCurrentValue"
      :customStyle="customStyle"
      :needleAnimation="needleAnimation"
      :shadowFilter="shadowFilter"
    />
  </div>
</template>

<script>
import VueSpeedMeter from "vue-speed-meter";

export default {
  name: "Demo",

  components: {
    VueSpeedMeter,
  },

  data: function() {
    return {
      customCurrentValue: 25,
      customStyle: {
        size: 500,
        mainBackgroundColor: "white",
        borderColor: "black",
        scaleColor: "black",
        scaleValuesFontFamily: "'Kameron', serif",
        scaleValuesColor: "black",
        scaleStartValue: -30,
        scaleStep: 5,
        animationTime: 5,
        needleColor: "black",
        needleCircleColor: "black",
        needleCircleBorderColor: "black",
      },
      needleAnimation: false,
      shadowFilter: false,
    };
  },
};
</script>