Vue LinearGauge - Customize Appearance

You can use the following properties to colorize gauge elements:

You can also add a custom pattern or gradient fill to the elements. Use the registerPattern() or registerGradient() method to create a custom pattern or gradient.

The following example adds a gradient to one of the ranges in a gauge:

App.vue (Options API)
App.vue (Composition API)
  • <template>
  • <DxLinearGauge ... >
  • <DxRangeContainer ... >
  • <DxRange
  • :start-value="0"
  • :end-value="50"
  • color="#92000A"
  • />
  • <DxRange
  • :start-value="50"
  • :end-value="100"
  • :color="fill"
  • />
  • </DxRangeContainer>
  • </DxLinearGauge>
  • </template>
  •  
  • <script>
  • import DxLinearGauge, { DxRangeContainer, DxRange } from 'devextreme-vue/linear-gauge';
  • import { registerGradient } from 'devextreme/common/charts';
  • // ...
  •  
  • export default {
  • components: {
  • DxLinearGauge,
  • DxRangeContainer,
  • DxRange
  • },
  • data() {
  • return {
  • // ...
  • fill: {
  • fillId: registerGradient("linear", {
  • colors: [{
  • offset: "20%",
  • color: "#97c95c"
  • }, {
  • offset: "90%",
  • color: "#eb3573"
  • }]
  • });
  • }
  • }
  • }
  • }
  • </script>
  • <template>
  • <DxLinearGauge ... >
  • <DxRangeContainer ... >
  • <DxRange
  • :start-value="0"
  • :end-value="50"
  • color="#92000A"
  • />
  • <DxRange
  • :start-value="50"
  • :end-value="100"
  • :color="fill"
  • />
  • </DxRangeContainer>
  • </DxLinearGauge>
  • </template>
  •  
  • <script setup>
  • import DxLinearGauge, { DxRangeContainer, DxRange } from 'devextreme-vue/linear-gauge';
  • import { registerGradient } from 'devextreme/common/charts';
  • // ...
  •  
  • const fill = {
  • fillId: registerGradient("linear", {
  • colors: [{
  • offset: "20%",
  • color: "#97c95c"
  • }, {
  • offset: "90%",
  • color: "#eb3573"
  • }]
  • });
  • };
  • </script>