Vue PieChart - legend.title

Configures the legend title.

Type:

Object

|

String

DevExtreme PieChart: Legend 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

Specifies the legend title's font options.

Type:

Object

jQuery
index.js
$(function() {
    $("#pieChartContainer").dxPieChart({
        // ...
        legend: {
            title: {
                font: {
                    color: "black"
                }
            }
        }
    });
});
Angular
app.component.html
app.component.ts
app.module.ts
<dx-pie-chart ... >
    <dxo-legend>
        <dxo-title ... >
            <dxo-font
                color="black">
            </dxo-font>
        </dxo-title>
    </dxo-legend>
</dx-pie-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 { DxPieChartModule } from 'devextreme-angular';

@NgModule({
    declarations: [
        AppComponent
    ],
    imports: [
        BrowserModule,
        DxPieChartModule
    ],
    providers: [ ],
    bootstrap: [AppComponent]
})
export class AppModule { }
Vue
App.vue
<template>
    <DxPieChart ... >
        <DxLegend>
            <DxTitle ... >
                <DxFont
                    color="black"
                />
            </DxTitle>
        </DxLegend>
    </DxPieChart>
</template>

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

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

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

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

horizontalAlignment

Along with verticalAlignment, specifies the legend title's position.

Type:

String

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

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.

margin

Generates space around the legend title.

Type:

Object

Use the fields of this object to set the bottom and top margins to different values.

If the margins should be equal, set this option to a number.

placeholderSize

Reserves a pixel-measured space for the legend title.

Type:

Number

Default Value: undefined

subtitle

Configures the legend subtitle. The subtitle appears only if the title is specified.

Type:

Object

|

String

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

text

Specifies the legend title's text.

Type:

String

Default Value: null

verticalAlignment

Specifies the legend title's vertical alignment.

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 5 Control or a DevExtreme-Based ASP.NET Core Control. This enum accepts the following values: Top and Bottom.