All docs
V19.1
23.2 (CTP)
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
18.1
17.2
A newer version of this page is available. Switch to the current version.

jQuery CircularGauge - title.font

Specifies font options for the title.

Type:

Object

jQuery
index.js
$(function() {
    $("#circularGaugeContainer").dxCircularGauge({
        // ...
        title: {
            font: {
                color: "black"
            }
        }
    });
});
Angular
app.component.html
app.component.ts
app.module.ts
<dx-circular-gauge ... >
    <dxo-title ... >
        <dxo-font
            color="black">
        </dxo-font>
    </dxo-title>
</dx-circular-gauge>
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 { DxCircularGaugeModule } from 'devextreme-angular';

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

<script>
import DxCircularGauge, {
    DxTitle,
    DxFont
} from 'devextreme-vue/circular-gauge';

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

import CircularGauge, {
    Title,
    Font
} from 'devextreme-react/circular-gauge';

class App extends React.Component {
    render() {
        return (
            <CircularGauge ... >
                <Title ... >
                    <Font color="black" />
                </Title>
            </CircularGauge>
        );
    }
}
export default App;
ASP.NET MVC Controls
Razor C#
@(Html.DevExtreme().CircularGauge()
    // ...
    .Title(t => t
        .Font(f => f.Color("black"))
    )
)

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: 28

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