JavaScript/jQuery CircularGauge - TextCloud

An object that defines a gauge indicator of the textCloud type.

Type:

Object

jQuery
JavaScript
HTML
$(function() {
    $("#circularGaugeContainer").dxCircularGauge({
        value: 40,
        valueIndicator: { // or subvalueIndicator
            type: "textCloud",
            // ...
            // 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="textCloud"
        <!-- ... -->
        <!-- 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.TextCloud)
        // ...
        // The rest of the indicator options go here
        // ...
    )
)

View Demo

arrowLength

Specifies the length of an arrow for the indicator of the textCloud type in pixels.

Type:

Number

Default Value: 5

color

Specifies a color of the indicator.

Type:

String

Default Value: '#679EC5'

offset

Specifies the distance between the indicator and the invisible scale line.

Type:

Number

Default Value: -6

CircularGauge Demo View Demo

palette

Sets the palette to be used to colorize indicators differently.

Type:

Array<String>

|

String

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:

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.

text

Specifies the appearance of the text displayed in an indicator of the rangeBar type.

Type:

Object

Note that the indent option of the text configuration object must not be set to 0 if you need to show the text.