React RangeSelector - title

Configures the widget's title.

Type:

Object

|

String

The widget's title is a short text that usually indicates what is visualized. If you need to specify the title's text only, assign it directly to the title option. Otherwise, set this option to an object with the text and other fields specified.

The title can be accompanied by a subtitle elaborating on the visualized subject using the title.subtitle object.

font

Specifies font options for the title.

Type:

Object

jQuery
index.js
$(function() {
    $("#rangeSelectorContainer").dxRangeSelector({
        // ...
        title: {
            font: {
                color: "black"
            }
        }
    });
});
Angular
app.component.html
app.component.ts
app.module.ts
<dx-range-selector ... >
    <dxo-title ... >
        <dxo-font
            color="black">
        </dxo-font>
    </dxo-title>
</dx-range-selector>
import { Component } from '@angular/core';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
export class AppComponent {
    // ...
}
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';

import { DxChartModule } from 'devextreme-angular';

@NgModule({
    declarations: [
        AppComponent
    ],
    imports: [
        BrowserModule,
        DxChartModule
    ],
    providers: [ ],
    bootstrap: [AppComponent]
})
export class AppModule { }
Vue
DxComponent.vue
<template>
    <dx-range-selector ... >
        <dx-title ... >
            <dx-font
                color="black"
            />
        </dx-title>
    </dx-range-selector>
</template>

<script>
import DxRangeSelector, {
    DxTitle,
    DxFont
} from 'devextreme-vue/range-selector';

export default {
    components: {
        DxRangeSelector,
        DxTitle,
        DxFont
    },
    // ...
}
</script>
React
DxComponent.js
import React from 'react';

import RangeSelector, {
    Title,
    Font
} from 'devextreme-react/range-selector';

class DxComponent extends React.Component {
    render() {
        return (
            <RangeSelector ... >
                <Title ... >
                    <Font color="black" />
                </Title>
            </RangeSelector>
        );
    }
}
export default DxComponent;

horizontalAlignment

Specifies the title's alignment in a horizontal direction.

Type:

String

Default Value: 'center'
Accepted Values: 'center' | 'left' | 'right'

Use the HorizontalAlignment enum to specify this option when the widget is used as an ASP.NET MVC Control. This enum accepts the following values: Left, Center, and Right.

See Also

margin

Generates space around the title.

Type:

Number

|

Object

Default Value: 10

Use the fields of this object to set the required values for the left, right, top and bottom title margins separately. If title margins suppose to be equal, assign a numeric value directly to the margin property.

placeholderSize

Reserves a pixel-measured space for the title.

Type:

Number

Default Value: undefined

subtitle

Configures the widget's subtitle.

Type:

Object

|

String

If you need to specify the subtitle's text only, assign it directly to this option. Otherwise, set this option to an object with the text and other fields specified.

text

Specifies the title's text.

Type:

String

Default Value: null

verticalAlignment

Specifies the title's alignment in a vertical direction.

Type:

String

Default Value: 'top'
Accepted Values: 'bottom' | 'top'

Use the VerticalEdge enum to specify this option when the widget is used as an ASP.NET MVC Control. This enum accepts the following values: Top and Bottom.

See Also