TriangleNeedle

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

Type:

jQuery

index.js

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

Angular

HTML

TypeScript

<dx-circular-gauge [value]="40">
    <dxo-value-indicator <!-- or dxo-subvalue-indicator -->
        type="triangleNeedle"          
        <!-- 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="triangleNeedle"
            <!-- 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="triangleNeedle"
                    {/* 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.TriangleNeedle)
        // 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.