React VectorMap - legends.title
To specify only the title's text, assign it directly to this option. Otherwise, set this option to an object with the text and other fields specified.
The title can be accompanied by a subtitle. Assign it to the title.subtitle option.
font
jQuery
$(function() { $("#vectorMapContainer").dxVectorMap({ // ... legend: { title: { font: { color: "black" } } } }); });
Angular
<dx-vector-map ... > <dxo-legend> <dxo-title ... > <dxo-font color="black"> </dxo-font> </dxo-title> </dxo-legend> </dx-vector-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 { DxVectorMapModule } from 'devextreme-angular'; @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, DxVectorMapModule ], providers: [ ], bootstrap: [AppComponent] }) export class AppModule { }
Vue
<template> <DxVectorMap ... > <DxLegend> <DxTitle ... > <DxFont color="black" /> </DxTitle> </DxLegend> </DxVectorMap> </template> <script> import DxVectorMap, { DxLegend, DxTitle, DxFont } from 'devextreme-vue/vector-map'; export default { components: { DxVectorMap, DxLegend, DxTitle, DxFont }, // ... } </script>
React
import React from 'react'; import VectorMap, { Legend, Title, Font } from 'devextreme-react/vector-map'; class App extends React.Component { render() { return ( <VectorMap ... > <Legend ... > <Title ... > <Font color="black" /> </Title> </Legend> </VectorMap> ); } } export default App;
horizontalAlignment
Along with verticalAlignment, specifies the legend title's position.
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
.
verticalAlignment
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
.
If you have technical questions, please create a support ticket in the DevExpress Support Center.