jQuery CircularGauge - TwoColorNeedle
Type:
jQuery
index.js
$(function() {
$("#circularGauge").dxCircularGauge({
value: 40,
valueIndicator: { // or subvalueIndicator
type: "twoColorNeedle",
// The rest of the indicator properties go here
}
});
});Angular
HTML
TypeScript
<dx-circular-gauge [value]="40">
<dxo-value-indicator <!-- or dxo-subvalue-indicator -->
type="twoColorNeedle"
<!-- 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="twoColorNeedle"
<!-- 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="twoColorNeedle"
{/* 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.TwoColorNeedle)
// The rest of the indicator properties go here
)
)color
Type:
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
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 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
secondColor
Type:
Default Value: '#E18E92'
When you use a twoColorNeedle indicator, define the colors for it using the color and secondColor properties. The color property sets the color for the base of the needle. The secondColor property sets the color for the tip of the needle.
This property supports the following colors:
- Hexadecimal colors
- RGB colors
- RGBA colors
- Predefined/cross-browser color names
- Predefined SVG colors
- Paint server address
In addition, you can specify the ratio between the main and the second color using the secondFraction property.
Feedback