jQuery CircularGauge - TwoColorNeedle
jQuery
$(function() {
$("#circularGauge").dxCircularGauge({
value: 40,
valueIndicator: { // or subvalueIndicator
type: "twoColorNeedle",
// The rest of the indicator options go here
}
});
});Angular
<dx-circular-gauge [value]="40">
<dxo-value-indicator <!-- or dxo-subvalue-indicator -->
type="twoColorNeedle"
<!-- 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
],
// ...
})Vue
<template>
<DxCircularGauge :value="40">
<DxValueIndicator <!-- or DxSubvalueIndicator -->
type="twoColorNeedle"
<!-- The rest of the indicator options 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="twoColorNeedle"
{/* The rest of the indicator options go here */}
/>
</CircularGauge>
);
}
}
export default App;ASP.NET MVC Controls
@(Html.DevExtreme().CircularGauge()
.ID("circularGauge")
.Value(40)
.ValueIndicator(vi => vi // or .SubvalueIndicator
.Type(GaugeIndicatorType.TwoColorNeedle)
// The rest of the indicator options go here
)
)color
This option 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 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.
secondColor
When you use a twoColorNeedle indicator, define the colors for it using the color and secondColor options. The color option sets the color for the base of the needle. The secondColor option sets the color for the tip of the needle.
This option 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 option.