All docs
V20.1
20.2
20.1
19.2
19.1
18.2
The page you are viewing does not exist in version 18.2. This link will take you to the root page.
18.1
The page you are viewing does not exist in version 18.1. This link will take you to the root page.
17.2
The page you are viewing does not exist in version 17.2. This link will take you to the root page.
17.1
The page you are viewing does not exist in version 17.1. This link will take you to the root page.
16.2
The page you are viewing does not exist in version 16.2. This link will take you to the root page.
Box
Map
Vue

font

Specifies the legend title's font options.

Type:

Object

jQuery
index.js
$(function() {
    $("#chartContainer").dxChart({
        // ...
        legend: {
            title: {
                font: {
                    color: "black"
                }
            }
        }
    });
});
Angular
app.component.html
app.component.ts
app.module.ts
<dx-chart ... >
    <dxo-legend>
        <dxo-title ... >
            <dxo-font
                color="black">
            </dxo-font>
        </dxo-title>
    </dxo-legend>
</dx-chart>
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
App.vue
<template>
    <DxChart ... >
        <DxLegend>
            <DxTitle ... >
                <DxFont
                    color="black"
                />
            </DxTitle>
        </DxLegend>
    </DxChart>
</template>

<script>
import DxChart, {
    DxLegend,
    DxTitle,
    DxFont
} from 'devextreme-vue/chart';

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

import Chart, {
    Legend,
    Title,
    Font
} from 'devextreme-react/chart';

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

color

Specifies font color.

Type:

String

Default Value: '#232323'

This option supports the following colors:

family

Specifies font family.

Type:

String

Default Value: '"Segoe UI Light", "Helvetica Neue Light", "Segoe UI", "Helvetica Neue", "Trebuchet MS", Verdana, sans-serif'

For details on acceptable values, refer to the Font family article.

opacity

Specifies font opacity.

Type:

Number

Default Value: 1

This option accepts a value from 0 to 1, where 0 makes the text completely transparent, and 1 makes it opaque.

size

Specifies font size.

Type:

String

|

Number

Default Value: 18

A numeric value specifies the font size in pixels. A string value can specify the font size in any units listed here, but multi-line text only supports length units.

weight

Specifies font weight. Accepts values from 100 to 900 in increments of 100. Higher values increase boldness.

Type:

Number

Default Value: 200