JavaScript/jQuery CircularGauge - RectangleNeedle
Type:
jQuery
index.js
$(function() {
$("#circularGauge").dxCircularGauge({
value: 40,
valueIndicator: { // or subvalueIndicator
type: "rectangleNeedle",
// The rest of the indicator properties go here
}
});
});Angular
HTML
TypeScript
<dx-circular-gauge [value]="40">
<dxo-value-indicator <!-- or dxo-subvalue-indicator -->
type="rectangleNeedle"
<!-- 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="rectangleNeedle"
<!-- 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="rectangleNeedle"
{/* 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.RectangleNeedle)
// The rest of the indicator properties go here
)
)color
Default Value: '#C2C2C2'
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>
);
} 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
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
Feedback