JavaScript/jQuery CircularGauge - TextCloud

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

Type:

jQuery

index.js

$(function() {
    $("#circularGauge").dxCircularGauge({
        value: 40,
        valueIndicator: {
            type: "textCloud",
        },
        subvalueIndicator: {
            type: "textCloud",
        },
    });
});

Angular

app.component.html

app.module.ts

<dx-circular-gauge [value]="40">
    <dxo-circular-gauge-value-indicator
        type="textCloud"
    ></dxo-circular-gauge-value-indicator>
    <dxo-circular-gauge-subvalue-indicator
        type="textCloud"
    ></dxo-circular-gauge-subvalue-indicator>
</dx-circular-gauge>

import { DxCircularGaugeModule } from "devextreme-angular";
// ...
export class AppComponent {
    // ...
}
@NgModule({
    imports: [
        // ...
        DxCircularGaugeModule
    ],
    // ...
})

Vue

App.vue

<template>
    <DxCircularGauge :value="40">
        <DxValueIndicator
            type="textCloud"
        />
        <DxSubvalueIndicator
            type="textCloud"
        />
    </DxCircularGauge>
</template>

<script setup lang="ts">
import { DxCircularGauge, DxValueIndicator, DxSubvalueIndicator } from 'devextreme-vue/circular-gauge';

</script>

React

App.tsx

import { CircularGauge, ValueIndicator, SubvalueIndicator } from 'devextreme-react/circular-gauge';

function App(): JSX.Element {
    return (
        <CircularGauge value={40}>
            <ValueIndicator
                type="textCloud"
            />
            <SubvalueIndicator
                type="textCloud"
            />
        </CircularGauge>
    );
}

ASP.NET MVC Controls

Razor C#

@(Html.DevExtreme().CircularGauge()
    .ID("circularGauge")
    .Value(40)
    .ValueIndicator(vi => vi.Type(GaugeIndicatorType.TextCloud))
    .SubvalueIndicator(svi => svi.Type(GaugeIndicatorType.TextCloud))
)

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 the color of the indicator.

Type:

String

|

ChartsColor

Default Value: '#679EC5'

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-circular-gauge-value-indicator [color]="fill">
    </dxo-circular-gauge-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>        
    ); 
}