DevExtreme Angular - Title and Subtitle

Title and subtitle are textual elements that give an idea of what the Chart visualizes.

DevExtreme HTML5 JavaScript Charts Title Subtitle

The title is configured by the title object. The subtitle is configured by the subtitle object nested in the title object.

jQuery
JavaScript
$(function() {
    $("#chartContainer").dxChart({
        // ...
        title: {
            text: "I am the Title",
            subtitle: {
                text: "I am the Subtitle"
            }
        }
    });
});
Angular
HTML
TypeScript
<dx-chart ... >
    <dxo-title
        text="I am the Title">
        <dxo-subtitle
            text="I am the Subtitle">
        </dxo-subtitle>
    </dxo-title>
</dx-chart>
import { DxChartModule } from 'devextreme-angular';
// ...
export class AppComponent {
    // ...
}
@NgModule({
    imports: [
        // ...
        DxChartModule
    ],
    // ...
})

You can set the title's text more concisely by assigning it directly to the title option. This is useful if you are satisfied with the default settings of the title and do not need a subtitle.

jQuery
JavaScript
$(function() {
    $("#chartContainer").dxChart({
        // ...
        title: "I am the Title"
    });
});
Angular
HTML
TypeScript
<dx-chart
    text="I am the Title">
</dx-chart>
import { DxChartModule } from 'devextreme-angular';
// ...
export class AppComponent {
    // ...
}
@NgModule({
    imports: [
        // ...
        DxChartModule
    ],
    // ...
})

For information about all options of the title and subtitle, visit the title section of the API reference.

See Also