Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://js.devexpress.com/Vue/Documentation/ApiReference/UI_Components/dxChart/Configuration/title/ below:

Vue Chart - title | Vue Documentation

Configures the UI component's title.

Selector: DxTitle

Type: viz/core/base_widget:BaseWidgetTitle

The UI component's title is a short text that usually indicates what is visualized. If you need to specify the title's text only, assign it directly to the title property. Otherwise, set this property to an object with the text and other fields specified.

The title can be accompanied by a subtitle elaborating on the visualized subject using the title.subtitle object.

View Demo

Specifies font properties for the title.

The following code sample illustrates how to set this property:

$(function() {
    $("#chartContainer").dxChart({
        // ...
        title: {
            font: {
                color: "black"
            }
        }
    });
});

<dx-chart ... >
    <dxo-title ... >
        <dxo-font
            color="black">
        </dxo-font>
    </dxo-title>
</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 { }

<template>
    <DxChart ... >
        <DxTitle ... >
            <DxFont
                color="black"
            />
        </DxTitle>
    </DxChart>
</template>

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

export default {
    components: {
        DxChart,
        DxTitle,
        DxFont
    },
    // ...
}
</script>

import React from 'react';

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

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

@(Html.DevExtreme().Chart()
    // ...
    .Title(t => t
        .Font(f => f.Color("black"))
    )
)

Specifies the title's alignment in a horizontal direction.

Selector: horizontal-alignment

Default Value: 'center'

Generates space around the title.

Selector: DxMargin

Default Value: 10

Use the fields of this object to set the required values for the left, right, top and bottom title margins separately. If title margins suppose to be equal, assign a numeric value directly to the margin property.

Reserves a pixel-measured space for the title.

Selector: placeholder-size

Default Value: undefined

Configures the UI component's subtitle.

If you need to specify the subtitle's text only, assign it directly to this property. Otherwise, set this property to an object with the text and other fields specified.

Specifies the title's text.

Specifies what to do with the title when it overflows the allocated space after applying wordWrap: hide, truncate it and display an ellipsis, or do nothing.

Selector: text-overflow

Default Value: 'ellipsis'

Specifies the title's alignment in a vertical direction.

Selector: vertical-alignment

Default Value: 'top'

Specifies how to wrap the title if it does not fit into a single line.

Selector: word-wrap

Default Value: 'normal'

The following modes are available:

• "normal"
  Text breaks only at allowed breakpoints (for example, a space between two words).

• "breakWord"
  Words can be broken if there are no available breakpoints in the line.

• "none"
  Word wrap is disabled.

If the text overflows the container even after word wrap, the UI component applies the textOverflow property.

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4