Angular CircularGauge - TextCloud
An object that defines a gauge indicator of the textCloud type.
jQuery
$(function() {
$("#circularGauge").dxCircularGauge({
value: 40,
valueIndicator: { // or subvalueIndicator
type: "textCloud",
// The rest of the indicator properties go here
}
});
});Angular
<dx-circular-gauge [value]="40">
<dxo-value-indicator <!-- or dxo-subvalue-indicator -->
type="textCloud"
<!-- 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
<template>
<DxCircularGauge :value="40">
<DxValueIndicator <!-- or DxSubvalueIndicator -->
type="textCloud"
<!-- 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
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="textCloud"
{/* The rest of the indicator properties go here */}
/>
</CircularGauge>
);
}
}
export default App;ASP.NET MVC Controls
@(Html.DevExtreme().CircularGauge()
.ID("circularGauge")
.Value(40)
.ValueIndicator(vi => vi // or .SubvalueIndicator
.Type(GaugeIndicatorType.TextCloud)
// The rest of the indicator properties go here
)
)arrowLength
Specifies the length of an arrow for the indicator of the textCloud type in pixels.
color
Specifies a color of the indicator.
This property supports the following colors:
- Hexadecimal colors
- RGB colors
- RGBA colors
- Predefined/cross-browser color names
- Predefined SVG colors
- Paint server address
offset
Specifies the distance between the indicator and the invisible scale line.
palette
Sets the palette to be used to colorize indicators differently.
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
text
Specifies the appearance of the text displayed in an indicator of the rangeBar type.
Note that the indent property of the text configuration object must not be set to 0 if you need to show the text.
If you have technical questions, please create a support ticket in the DevExpress Support Center.