TriangleMarker
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 ) )
color
Type:
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
palette
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 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
.
Feel free to share demo-related thoughts here.
If you have technical questions, please create a support ticket in the DevExpress Support Center.
If you have technical questions, please create a support ticket in the DevExpress Support Center.
Thank you!
We appreciate your feedback.
We appreciate your feedback.