All docs
V19.2
24.1
The page you are viewing does not exist in version 24.1.
23.2
The page you are viewing does not exist in version 23.2.
23.1
The page you are viewing does not exist in version 23.1.
22.2
The page you are viewing does not exist in version 22.2.
22.1
The page you are viewing does not exist in version 22.1.
21.2
The page you are viewing does not exist in version 21.2.
21.1
The page you are viewing does not exist in version 21.1.
20.2
The page you are viewing does not exist in version 20.2.
20.1
The page you are viewing does not exist in version 20.1.
19.2
19.1
18.2
The page you are viewing does not exist in version 18.2.
18.1
The page you are viewing does not exist in version 18.1.
17.2
The page you are viewing does not exist in version 17.2.
Box
Map
Vue
A newer version of this page is available. Switch to the current version.

jQuery Funnel - legend.title.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.

font

Specifies the legend subtitle's font options.

Type:

Object

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

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

<script>
import DxFunnel, {
    DxLegend,
    DxTitle,
    DxSubtitle,
    DxFont
} from 'devextreme-vue/funnel';

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

import Funnel, {
    Legend,
    Title,
    Subtitle,
    Font
} from 'devextreme-react/funnel';

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

offset

Specifies the distance between the legend's title and subtitle in pixels.

Type:

Number

Default Value: 0

text

Specifies the subtitle's text.

Type:

String

Default Value: null