JavaScript/jQuery CircularGauge - TriangleMarker

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

Type:

jQuery

index.js

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

Angular

HTML

TypeScript

<dx-circular-gauge [value]="40">
    <dxo-value-indicator <!-- or dxo-subvalue-indicator -->
        type="triangleMarker"          
        <!-- 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="triangleMarker"
            <!-- 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="triangleMarker"
                    {/* 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.TriangleMarker)
        // The rest of the indicator properties go here
    )
)

View Demo

color

Specifies the color of the indicator.

Type:

String

ChartsColor

Default Value: '#8798A5'

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>        
    ); 
}