title
Configures the widget's title.
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.
jQuery
$(function() { $("#barGaugeContainer").dxBarGauge({ // ... title: { font: { color: "black" } } }); });
Angular
<dx-bar-gauge ... > <dxo-title ... > <dxo-font color="black"> </dxo-font> </dxo-title> </dx-bar-gauge>
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 { DxBarGaugeModule } from 'devextreme-angular'; @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, DxBarGaugeModule ], providers: [ ], bootstrap: [AppComponent] }) export class AppModule { }
Vue
<template> <dx-bar-gauge ... > <dx-title ... > <dx-font color="black" /> </dx-title> </dx-bar-gauge> </template> <script> import DxBarGauge, { DxTitle, DxFont } from 'devextreme-vue/bar-gauge'; export default { components: { DxBarGauge, DxTitle, DxFont }, // ... } </script>
React
import React from 'react'; import BarGauge, { Title, Font } from 'devextreme-react/bar-gauge'; class App extends React.Component { render() { return ( <BarGauge ... > <Title ... > <Font color="black" /> </Title> </BarGauge> ); } } export default App;
ASP.NET MVC Controls
@(Html.DevExtreme().BarGauge() // ... .Title(t => t .Font(f => f.Color("black")) ) )
horizontalAlignment
Specifies the title's alignment in a horizontal direction.
Use the HorizontalAlignment
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: Left
, Center
, and Right
.
See Also
- title.verticalAlignment
margin
Generates space around the title.
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.
subtitle
Configures the widget's subtitle.
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.
textOverflow
Specifies what to do with the title when it overflows the allocated space after applying wordWrap: hide, truncate it and display an ellipsis, or do nothing.
Use the VizTextOverflow
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: Ellipsis
, Hide
, and None
.
verticalAlignment
Specifies the title's alignment in a vertical direction.
Use the VerticalEdge
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: Top
and Bottom
.
See Also
- title.horizontalAlignment
wordWrap
Specifies how to wrap the title if it does not fit into a single line.
The following modes are available:
"normal"
Text breaks only at allowed breakpoints (for example, a space between two words)."breakWord"
Words can be broken if there are no available breakpoints in the line."none"
Word wrap is disabled.
If the text overflows the container even after word wrap, the widget applies the textOverflow option.
Use the VizWordWrap
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: Normal
, BreakWord
, and None
.
If you have technical questions, please create a support ticket in the DevExpress Support Center.
We appreciate your feedback.