jQuery CircularGauge - RectangleNeedle
Type:
jQuery
JavaScript
HTML
$(function() {
$("#circularGaugeContainer").dxCircularGauge({
value: 40,
valueIndicator: { // or subvalueIndicator
type: "rectangleNeedle",
// ...
// The rest of the indicator options go here
// ...
}
});
});<div id="circularGaugeContainer"></div>
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
],
// ...
})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
// ...
)
)indentFromCenter
Specifies the distance between the needle and the center of a gauge for the indicator of a needle-like type.
Type:
Default Value: 0
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 option 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 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.
Feedback