React LinearGauge - TextCloud

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

Type:

jQuery

index.js

$(function() {
    $("#linearGauge").dxLinearGauge({
        value: 40,
        valueIndicator: { // or subvalueIndicator
            type: "textCloud",
            // The rest of the indicator properties go here
        }
    });
});

Angular

HTML

TypeScript

<dx-linear-gauge [value]="40">
    <dxo-value-indicator <!-- or dxo-subvalue-indicator -->
        type="textCloud"          
        <!-- The rest of the indicator properties go here -->
    ></dxo-value-indicator>
<dx-linear-gauge>

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

Vue

App.vue

<template>
    <DxLinearGauge :value="40">
        <DxValueIndicator <!-- or DxSubvalueIndicator -->
            type="textCloud"
            <!-- The rest of the indicator properties go here -->
        /> 
    </DxLinearGauge>
</template>

<script>
import DxLinearGauge, {
    DxValueIndicator
} from 'devextreme-vue/linear-gauge';

export default {
    components: {
        DxLinearGauge,
        DxValueIndicator
    }
}
</script>

React

App.js

import React from 'react';

import LinearGauge, {
    ValueIndicator
} from 'devextreme-react/linear-gauge';

class App extends React.Component {
    render() {
        return (
            <LinearGauge value={40}>
                <ValueIndicator {/* or SubvalueIndicator */}                        
                    type="textCloud"
                    {/* The rest of the indicator properties go here */}
                />
            </LinearGauge>
        );
    }
}
export default App;

ASP.NET MVC Controls

Razor C#

@(Html.DevExtreme().LinearGauge()
    .ID("linearGauge")
    .Value(40)
    .ValueIndicator(vi => vi // or .SubvalueIndicator
        .Type(GaugeIndicatorType.TextCloud)
        // The rest of the indicator properties 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 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(){
    $("#linearGaugeContainer").dxLinearGauge({
        // ...
        valueIndicator: {
            // ...
            color: {
                fillId: customPatternId
            }
        }
    });
});

Angular

app.component.html

app.component.ts

<dx-linear-gauge ... >
    <dxo-value-indicator [color]="fill">
    </dxo-value-indicator>
</dx-linear-gauge>

// ...

export class AppComponent {
    // ...

    fill = {
        fillId: this.customPatternId
    };
}

Vue

App.vue (Options API)

App.vue (Composition API)

<template>
    <DxLinearGauge ... >
        <DxValueIndicator
            :color="fill"
        />
    </DxLinearGauge>
</template>

<script>
import DxLinearGauge, { DxValueIndicator } from 'devextreme-vue/linear-gauge'; 
// ...

export default {
    components: {
        DxLinearGauge,
        DxValueIndicator
    },
    data() {
        return {
            // ...
            fill: {
                fillId: this.customPatternId
            }
        }
    }
}
</script>

<template>
    <DxLinearGauge ... >
        <DxValueIndicator
            :color="fill"
        />
    </DxLinearGauge>
</template>

<script setup>
import DxLinearGauge, { DxValueIndicator } from 'devextreme-vue/linear-gauge'; 
// ...

const fill = {
    fillId: customPatternId
};
</script>

React

App.js

import React from 'react';
import LinearGauge, { ValueIndicator } from 'devextreme-react/linear-gauge';

// ...
const fill = {
    fillId: customPatternId
};

export default function App() { 
    return ( 
        <LinearGauge ... >
            <ValueIndicator color={fill} />
        </LinearGauge>        
    ); 
}