JavaScript/jQuery Chart - legend.title
To specify only the title's text, assign it directly to this property. Otherwise, set this property to an object with the text and other fields specified.
The title can be accompanied by a subtitle. Assign it to the title.subtitle property.
font
Type:
The following code sample illustrates how to set this property:
jQuery
index.js
$(function() { $("#chartContainer").dxChart({ // ... legend: { title: { font: { color: "black" } } } }); });
Angular
app.component.html
app.component.ts
app.module.ts
<dx-chart ... > <dxo-legend> <dxo-title ... > <dxo-font color="black"> </dxo-font> </dxo-title> </dxo-legend> </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 { }
Vue
App.vue
<template> <DxChart ... > <DxLegend> <DxTitle ... > <DxFont color="black" /> </DxTitle> </DxLegend> </DxChart> </template> <script> import DxChart, { DxLegend, DxTitle, DxFont } from 'devextreme-vue/chart'; export default { components: { DxChart, DxLegend, DxTitle, DxFont }, // ... } </script>
React
App.js
import React from 'react'; import Chart, { Legend, Title, Font } from 'devextreme-react/chart'; class App extends React.Component { render() { return ( <Chart ... > <Legend ... > <Title ... > <Font color="black" /> </Title> </Legend> </Chart> ); } } export default App;
Feel free to share topic-related thoughts here.
If you have technical questions, please create a support ticket in the DevExpress Support Center.
Thank you for the feedback!
If you have technical questions, please create a support ticket in the DevExpress Support Center.