JavaScript/jQuery TreeMap - title
The UI component'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 property. Otherwise, set this property 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
jQuery
$(function() {
$("#treeMapContainer").dxTreeMap({
// ...
title: {
font: {
color: "black"
}
}
});
});Angular
<dx-tree-map ... >
<dxo-title ... >
<dxo-font
color="black">
</dxo-font>
</dxo-title>
</dx-tree-map>
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 { DxTreeMapModule } from 'devextreme-angular';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
DxTreeMapModule
],
providers: [ ],
bootstrap: [AppComponent]
})
export class AppModule { }Vue
<template>
<DxTreeMap ... >
<DxTitle ... >
<DxFont
color="black"
/>
</DxTitle>
</DxTreeMap>
</template>
<script>
import DxTreeMap, {
DxTitle,
DxFont
} from 'devextreme-vue/tree-map';
export default {
components: {
DxTreeMap,
DxTitle,
DxFont
},
// ...
}
</script>React
import React from 'react';
import TreeMap, {
Title,
Font
} from 'devextreme-react/tree-map';
class App extends React.Component {
render() {
return (
<TreeMap ... >
<Title ... >
<Font color="black" />
</Title>
</TreeMap>
);
}
}
export default App;ASP.NET MVC Controls
@(Html.DevExtreme().TreeMap()
// ...
.Title(t => t
.Font(f => f.Color("black"))
)
)horizontalAlignment
Use the HorizontalAlignment enum to specify this property when the UI component 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
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 property when the UI component 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
Use the VerticalEdge enum to specify this property when the UI component 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
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 UI component applies the textOverflow property.
Use the VizWordWrap enum to specify this property when the UI component 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.