JavaScript/jQuery CircularGauge - RectangleNeedle

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

Type:

Object

jQuery
index.js
$(function() {
    $("#circularGauge").dxCircularGauge({
        value: 40,
        valueIndicator: { // or subvalueIndicator
            type: "rectangleNeedle",
            // The rest of the indicator options go here
        }
    });
});
Angular
HTML
TypeScript
<dx-circular-gauge [value]="40">
    <dxo-value-indicator <!-- or dxo-subvalue-indicator -->
        type="rectangleNeedle"          
        <!-- The rest of the indicator options 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="rectangleNeedle"
            <!-- The rest of the indicator options 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="rectangleNeedle"
                    {/* The rest of the indicator options 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.RectangleNeedle)
        // The rest of the indicator options 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 widget 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 a color of the indicator.

Type:

String

Default Value: '#C2C2C2'

This option supports the following colors:

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 View Demo

palette

Sets the palette to be used to colorize indicators differently.

Type:

Array<String>

|

String

Default Value: 'Material'
Accepted Values: 'Bright' | 'Harmony Light' | 'Ocean' | 'Pastel' | 'Soft' | 'Soft Pastel' | 'Vintage' | 'Violet' | 'Carmine' | 'Dark Moon' | 'Dark Violet' | 'Green Mist' | 'Soft Blue' | 'Material' | 'Office'

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

Use the VizPalette enum to specify this option when the widget is used as an ASP.NET MVC 5 Control or a DevExtreme-Based ASP.NET Core Control. This enum accepts the following values: Default, SoftPastel, HarmonyLight, Pastel, Bright, Soft, Ocean, Vintage, Violet, Carmine, DarkMoon, SoftBlue, DarkViolet, and GreenMist.

spindleGapSize

Specifies the inner diameter in pixels, so that the spindle has the shape of a ring.

Type:

Number

Default Value: 10

Set this property to 0 so that the spindle has the shape of a circle.

spindleSize

Specifies the spindle's diameter in pixels for the indicator of a needle-like type.

Type:

Number

Default Value: 14

width

Specifies the width of an indicator in pixels.

Type:

Number

Default Value: 2