TriangleNeedle
jQuery
$(function() { $("#circularGauge").dxCircularGauge({ value: 40, valueIndicator: { // or subvalueIndicator type: "triangleNeedle", // The rest of the indicator properties go here } }); });
Angular
<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
<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
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
@(Html.DevExtreme().CircularGauge() .ID("circularGauge") .Value(40) .ValueIndicator(vi => vi // or .SubvalueIndicator .Type(GaugeIndicatorType.TriangleNeedle) // The rest of the indicator properties go here ) )
color
This property supports the following colors:
- Hexadecimal colors
- RGB colors
- RGBA colors
- Predefined/cross-browser color names
- Predefined SVG colors
- Paint server address
indentFromCenter
Specifies the distance between the needle and the center of a gauge for the indicator of a needle-like type.
palette
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
Use the VizPalette
enum to specify this property when the UI component 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
.
If you have technical questions, please create a support ticket in the DevExpress Support Center.
We appreciate your feedback.