A newer version of this page is available.

React LinearGauge - Rhombus

An object defining a gauge indicator of the rhombus type.

Type:

jQuery

index.js

$(function() {
    $("#linearGauge").dxLinearGauge({
        value: 40,
        valueIndicator: {
            type: "rhombus",
        },
        subvalueIndicator: {
            type: "rhombus",
        },
    });
});

Angular

app.component.html

app.module.ts

<dx-linear-gauge [value]="40">
    <dxo-linear-gauge-value-indicator
        type="rhombus"
    ></dxo-linear-gauge-value-indicator>
    <dxo-linear-gauge-subvalue-indicator
        type="rhombus"
    ></dxo-linear-gauge-subvalue-indicator>
</dx-linear-gauge>

import { DxLinearGaugeModule } from "devextreme-angular";
// ...
export class AppComponent {
    // ...
}
@NgModule({
    imports: [
        // ...
        DxLinearGaugeModule
    ],
    // ...
})

Vue

App.vue

<template>
    <DxLinearGauge :value="40">
        <DxValueIndicator
            type="rhombus"
        />
        <DxSubvalueIndicator
            type="rhombus"
        />
    </DxLinearGauge>
</template>

<script setup lang="ts">
import { DxLinearGauge, DxValueIndicator, DxSubvalueIndicator } from 'devextreme-vue/linear-gauge';

</script>

React

App.tsx

import { LinearGauge, ValueIndicator, SubvalueIndicator } from 'devextreme-react/linear-gauge';

function App(): JSX.Element {
    return (
        <LinearGauge value={40}>
            <ValueIndicator
                type="rhombus"
            />
            <SubvalueIndicator
                type="rhombus"
            />
        </LinearGauge>
    );
}

ASP.NET MVC Controls

Razor C#

@(Html.DevExtreme().LinearGauge()
    .ID("linearGauge")
    .Value(40)
    .ValueIndicator(vi => vi.Type(GaugeIndicatorType.Rhombus))
    .SubvalueIndicator(svi => svi.Type(GaugeIndicatorType.Rhombus))
)

View Demo

color

Specifies the color of the indicator.

Type:

String

ChartsColor

Default Value: '#C2C2C2'

This property supports the following colors:

Hexadecimal colors
RGB colors
RGBA colors
Predefined/cross-browser color names
Predefined SVG colors
Paint server address

You can also specify a custom pattern or gradient instead of a plain color. Call the registerPattern() or registerGradient() method to obtain a fill ID. Assign that value to the fillId field.

jQuery

index.js

$(function(){
    $("#linearGaugeContainer").dxLinearGauge({
        // ...
        valueIndicator: {
            // ...
            color: {
                fillId: customPatternId
            }
        }
    });
});

Angular

app.component.html

app.component.ts

<dx-linear-gauge ... >
    <dxo-linear-gauge-value-indicator [color]="fill">
    </dxo-linear-gauge-value-indicator>
</dx-linear-gauge>

// ...

export class AppComponent {
    // ...

    fill = {
        fillId: this.customPatternId
    };
}

Vue

App.vue (Options API)

App.vue (Composition API)

<template>
    <DxLinearGauge ... >
        <DxValueIndicator
            :color="fill"
        />
    </DxLinearGauge>
</template>

<script>
import DxLinearGauge, { DxValueIndicator } from 'devextreme-vue/linear-gauge'; 
// ...

export default {
    components: {
        DxLinearGauge,
        DxValueIndicator
    },
    data() {
        return {
            // ...
            fill: {
                fillId: this.customPatternId
            }
        }
    }
}
</script>

<template>
    <DxLinearGauge ... >
        <DxValueIndicator
            :color="fill"
        />
    </DxLinearGauge>
</template>

<script setup>
import DxLinearGauge, { DxValueIndicator } from 'devextreme-vue/linear-gauge'; 
// ...

const fill = {
    fillId: customPatternId
};
</script>

React

App.js

import React from 'react';
import LinearGauge, { ValueIndicator } from 'devextreme-react/linear-gauge';

// ...
const fill = {
    fillId: customPatternId
};

export default function App() { 
    return ( 
        <LinearGauge ... >
            <ValueIndicator color={fill} />
        </LinearGauge>        
    ); 
}