JavaScript/jQuery 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>
Feel free to share topic-related thoughts here.
If you have technical questions, please create a support ticket in the DevExpress Support Center.
Thank you for the feedback!
If you have technical questions, please create a support ticket in the DevExpress Support Center.