React CircularGauge - TwoColorNeedle

An object that defines a gauge indicator of the twoColorNeedle type.

Type:

jQuery

index.js

$(function() {
    $("#circularGauge").dxCircularGauge({
        value: 40,
        valueIndicator: { // or subvalueIndicator
            type: "twoColorNeedle",
            // The rest of the indicator properties go here
        }
    });
});

Angular

HTML

TypeScript

<dx-circular-gauge [value]="40">
    <dxo-value-indicator <!-- or dxo-subvalue-indicator -->
        type="twoColorNeedle"          
        <!-- The rest of the indicator properties go here -->
    ></dxo-value-indicator>
<dx-circular-gauge>

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

Vue

App.vue

<template>
    <DxCircularGauge :value="40">
        <DxValueIndicator <!-- or DxSubvalueIndicator -->
            type="twoColorNeedle"
            <!-- The rest of the indicator properties go here -->
        /> 
    </DxCircularGauge>
</template>

<script>
import DxCircularGauge, {
    DxValueIndicator
} from 'devextreme-vue/circular-gauge';

export default {
    components: {
        DxCircularGauge,
        DxValueIndicator
    }
}
</script>

React

App.js

import React from 'react';

import CircularGauge, {
    ValueIndicator
} from 'devextreme-react/circular-gauge';

class App extends React.Component {
    render() {
        return (
            <CircularGauge value={40}>
                <ValueIndicator {/* or SubvalueIndicator */}                        
                    type="twoColorNeedle"
                    {/* The rest of the indicator properties go here */}
                />
            </CircularGauge>
        );
    }
}
export default App;

ASP.NET MVC Controls

Razor C#

@(Html.DevExtreme().CircularGauge()
    .ID("circularGauge")
    .Value(40)
    .ValueIndicator(vi => vi // or .SubvalueIndicator
        .Type(GaugeIndicatorType.TwoColorNeedle)
        // The rest of the indicator properties go here
    )
)

View Demo

beginAdaptingAtRadius

Specifies a radius small enough for the indicator to begin adapting.

Type:

Number

Default Value: 50

When adapting, the indicator adjusts its parts and surroundings proportionally to the changing UI component size. The adjustments affect the incidator's indent from the center, the offset from the scale, and the spindle's size and gap.

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(){
    $("#circularGaugeContainer").dxCircularGauge({
        // ...
        valueIndicator: {
            // ...
            color: {
                fillId: customPatternId
            }
        }
    });
});

Angular

app.component.html

app.component.ts

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

// ...

export class AppComponent {
    // ...

    fill = {
        fillId: this.customPatternId
    };
}

Vue

App.vue (Options API)

App.vue (Composition API)

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

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

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

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

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

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

React

App.js

import React from 'react';
import CircularGauge, { ValueIndicator } from 'devextreme-react/circular-gauge';

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

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

indentFromCenter

Specifies the distance between the needle and the center of a gauge for the indicator of a needle-like type.

Type:

Number

Default Value: 0

offset

Specifies the distance between the indicator and the invisible scale line.

Type:

Number

CircularGauge Demo LinearGauge Demo

palette

Sets the palette to be used to colorize indicators differently.

Type:

Array<String>

|

Palette

Default Value: 'Material'

This property accepts either the name of a predefined palette or an array of colors. The array can include the following colors:

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

secondColor

Specifies the second color for the indicator of the twoColorNeedle type.

Type:

String

Default Value: '#E18E92'

When you use a twoColorNeedle indicator, define the colors for it using the color and secondColor properties. The color property sets the color for the base of the needle. The secondColor property sets the color for the tip of the needle.

This property supports the following colors: