Accumulation Chart can be given a title using title
property, to show the information
about the data plotted.
import * as React from "react";
import * as ReactDOM from "react-dom";
import { AccumulationChartComponent, AccumulationSeriesCollectionDirective, AccumulationSeriesDirective,
Inject,LegendSettingsModel}
from'@syncfusion/ej2-react-charts';
class App extends React.Component<{}, {}> {
public data: any[] = [
{ x: 'Saudi Arabia', y: 58, text: '58%' },
{ x: 'Persian Gulf', y: 15, text: '15%' },
{ x: 'Canada', y: 13, text: '13%' },
{ x: 'Venezuela', y: 8, text: '8%' },
{ x: 'Mexico', y: 3, text: '3%' },
{ x: 'Russia', y: 2, text: '2%' },
{ x: 'Miscellaneous', y: 1, text: '1%' }];
public legendSettings: LegendSettingsModel = { visible: true };
render() {
return <AccumulationChartComponent id='charts' legendSettings={this.legendSettings} title='Oil and other liquid imports in USA' legendSettings={{ visible: false }>
<AccumulationSeriesCollectionDirective>
<AccumulationSeriesDirective dataSource={this.data} xName='x' yName='y' dataLabel={{
visible: true,
name: 'text',
font: {
fontWeight: '600'
}
}}>
</AccumulationSeriesDirective>
</AccumulationSeriesCollectionDirective>
</AccumulationChartComponent>
}
};
ReactDOM.render(<App />, document.getElementById("charts"));
import * as React from "react";
import { AccumulationChartComponent, AccumulationSeriesCollectionDirective, AccumulationSeriesDirective } from '@syncfusion/ej2-react-charts';
class App extends React.Component {
constructor() {
super(...arguments);
this.data = [
{ x: 'Saudi Arabia', y: 58, text: '58%' },
{ x: 'Persian Gulf', y: 15, text: '15%' },
{ x: 'Canada', y: 13, text: '13%' },
{ x: 'Venezuela', y: 8, text: '8%' },
{ x: 'Mexico', y: 3, text: '3%' },
{ x: 'Russia', y: 2, text: '2%' },
{ x: 'Miscellaneous', y: 1, text: '1%' }
];
this.legendSettings = { visible: true };
}
render() {
return <AccumulationChartComponent id='charts' legendSettings={this.legendSettings} title='Oil and other liquid imports in USA' legendSettings={{ visible: false } >
<AccumulationSeriesCollectionDirective>
<AccumulationSeriesDirective dataSource={this.data} xName='x' yName='y' dataLabel={{
visible: true,
name: 'text',
font: {
fontWeight: '600'
}
}}>
</AccumulationSeriesDirective>
</AccumulationSeriesCollectionDirective>} AccumulationChartComponent>
}
};
ReactDOM.render(<App />, document.getElementById("charts"));
</>;
}
}
Accumulation Chart can be customizing a title using titleStyle
property.
import * as React from "react";
import * as ReactDOM from "react-dom";
import { AccumulationChartComponent, AccumulationSeriesCollectionDirective, AccumulationSeriesDirective,
Inject,LegendSettingsModel}
from'@syncfusion/ej2-react-charts';
class App extends React.Component<{}, {}> {
public data: any[] = [
{ x: 'Saudi Arabia', y: 58, text: '58%' },
{ x: 'Persian Gulf', y: 15, text: '15%' },
{ x: 'Canada', y: 13, text: '13%' },
{ x: 'Venezuela', y: 8, text: '8%' },
{ x: 'Mexico', y: 3, text: '3%' },
{ x: 'Russia', y: 2, text: '2%' },
{ x: 'Miscellaneous', y: 1, text: '1%' }];
public legendSettings: LegendSettingsModel = { visible: true };
public title: any = {
fontFamily: "Arial",
fontStyle: 'italic',
fontWeight: 'regular',
color: "#E27F2D",
size: '23px'
};
render() {
return <AccumulationChartComponent id='charts' legendSettings={this.legendSettings} title='Oil and other liquid imports in USA' subTitle ='In the year 2014 - 2015' legendSettings={{ visible: false }>
<AccumulationSeriesCollectionDirective>
<AccumulationSeriesDirective dataSource={this.data} xName='x' yName='y' titleStyle={this.title} dataLabel={{
visible: true,
name: 'text',
font: {
fontWeight: '600'
}
}}>
</AccumulationSeriesDirective>
</AccumulationSeriesCollectionDirective>
</AccumulationChartComponent>
}
};
ReactDOM.render(<App />, document.getElementById("charts"));
import * as React from "react";
import { AccumulationChartComponent, AccumulationSeriesCollectionDirective, AccumulationSeriesDirective } from '@syncfusion/ej2-react-charts';
class App extends React.Component {
constructor() {
super(...arguments);
this.data = [
{ x: 'Saudi Arabia', y: 58, text: '58%' },
{ x: 'Persian Gulf', y: 15, text: '15%' },
{ x: 'Canada', y: 13, text: '13%' },
{ x: 'Venezuela', y: 8, text: '8%' },
{ x: 'Mexico', y: 3, text: '3%' },
{ x: 'Russia', y: 2, text: '2%' },
{ x: 'Miscellaneous', y: 1, text: '1%' }
];
this.legendSettings = { visible: true };
this.title = {
fontFamily: "Arial",
fontStyle: 'italic',
fontWeight: 'regular',
color: "#E27F2D",
size: '23px'
};
}
render() {
return <AccumulationChartComponent id='charts' legendSettings={this.legendSettings} title='Oil and other liquid imports in USA' subTitle='In the year 2014 - 2015' legendSettings={{ visible: false } >
<AccumulationSeriesCollectionDirective>
<AccumulationSeriesDirective dataSource={this.data} xName='x' yName='y' titleStyle={this.title} dataLabel={{
visible: true,
name: 'text',
font: {
fontWeight: '600'
}
}}>
</AccumulationSeriesDirective>
</AccumulationSeriesCollectionDirective>} AccumulationChartComponent>
}
};
ReactDOM.render(<App />, document.getElementById("charts"));
</>;
}
}
Accumulation Chart can be given a subtitle using subTitle
property, to show the information
about the data plotted.
import * as React from "react";
import * as ReactDOM from "react-dom";
import { AccumulationChartComponent, AccumulationSeriesCollectionDirective, AccumulationSeriesDirective,
Inject,LegendSettingsModel}
from'@syncfusion/ej2-react-charts';
class App extends React.Component<{}, {}> {
public data: any[] = [
{ x: 'Saudi Arabia', y: 58, text: '58%' },
{ x: 'Persian Gulf', y: 15, text: '15%' },
{ x: 'Canada', y: 13, text: '13%' },
{ x: 'Venezuela', y: 8, text: '8%' },
{ x: 'Mexico', y: 3, text: '3%' },
{ x: 'Russia', y: 2, text: '2%' },
{ x: 'Miscellaneous', y: 1, text: '1%' }];
public legendSettings: LegendSettingsModel = { visible: true };
render() {
return <AccumulationChartComponent id='charts' legendSettings={this.legendSettings} title='Oil and other liquid imports in USA' subTitle ='In the year 2014 - 2015' legendSettings={{ visible: false }>
<AccumulationSeriesCollectionDirective>
<AccumulationSeriesDirective dataSource={this.data} xName='x' yName='y' dataLabel={{
visible: true,
name: 'text',
font: {
fontWeight: '600'
}
}}>
</AccumulationSeriesDirective>
</AccumulationSeriesCollectionDirective>
</AccumulationChartComponent>
}
};
ReactDOM.render(<App />, document.getElementById("charts"));
import * as React from "react";
import { AccumulationChartComponent, AccumulationSeriesCollectionDirective, AccumulationSeriesDirective } from '@syncfusion/ej2-react-charts';
class App extends React.Component {
constructor() {
super(...arguments);
this.data = [
{ x: 'Saudi Arabia', y: 58, text: '58%' },
{ x: 'Persian Gulf', y: 15, text: '15%' },
{ x: 'Canada', y: 13, text: '13%' },
{ x: 'Venezuela', y: 8, text: '8%' },
{ x: 'Mexico', y: 3, text: '3%' },
{ x: 'Russia', y: 2, text: '2%' },
{ x: 'Miscellaneous', y: 1, text: '1%' }
];
this.legendSettings = { visible: true };
}
render() {
return <AccumulationChartComponent id='charts' legendSettings={this.legendSettings} title='Oil and other liquid imports in USA' subTitle='In the year 2014 - 2015' legendSettings={{ visible: false } >
<AccumulationSeriesCollectionDirective>
<AccumulationSeriesDirective dataSource={this.data} xName='x' yName='y' dataLabel={{
visible: true,
name: 'text',
font: {
fontWeight: '600'
}
}}>
</AccumulationSeriesDirective>
</AccumulationSeriesCollectionDirective>} AccumulationChartComponent>
}
};
ReactDOM.render(<App />, document.getElementById("charts"));
</>;
}
}
Accumulation Chart can be customizing a subtitle using subTitleStyle
property, to show the information
about the data plotted.
import * as React from "react";
import * as ReactDOM from "react-dom";
import { AccumulationChartComponent, AccumulationSeriesCollectionDirective, AccumulationSeriesDirective,
Inject,LegendSettingsModel}
from'@syncfusion/ej2-react-charts';
class App extends React.Component<{}, {}> {
public data: any[] = [
{ x: 'Saudi Arabia', y: 58, text: '58%' },
{ x: 'Persian Gulf', y: 15, text: '15%' },
{ x: 'Canada', y: 13, text: '13%' },
{ x: 'Venezuela', y: 8, text: '8%' },
{ x: 'Mexico', y: 3, text: '3%' },
{ x: 'Russia', y: 2, text: '2%' },
{ x: 'Miscellaneous', y: 1, text: '1%' }];
public legendSettings: LegendSettingsModel = { visible: true };
public subTitle: any = {
fontFamily: "Arial",
fontStyle: 'italic',
fontWeight: 'regular',
color: "#E27F2D",
size: '13px'
};
render() {
return <AccumulationChartComponent id='charts' legendSettings={this.legendSettings} title='Oil and other liquid imports in USA' subTitle ='In the year 2014 - 2015' legendSettings={{ visible: false }>
<AccumulationSeriesCollectionDirective>
<AccumulationSeriesDirective dataSource={this.data} xName='x' yName='y' subTitleStyle={this.subTitle} dataLabel={{
visible: true,
name: 'text',
font: {
fontWeight: '600'
}
}}>
</AccumulationSeriesDirective>
</AccumulationSeriesCollectionDirective>
</AccumulationChartComponent>
}
};
ReactDOM.render(<App />, document.getElementById("charts"));
import * as React from "react";
import { AccumulationChartComponent, AccumulationSeriesCollectionDirective, AccumulationSeriesDirective } from '@syncfusion/ej2-react-charts';
class App extends React.Component {
constructor() {
super(...arguments);
this.data = [
{ x: 'Saudi Arabia', y: 58, text: '58%' },
{ x: 'Persian Gulf', y: 15, text: '15%' },
{ x: 'Canada', y: 13, text: '13%' },
{ x: 'Venezuela', y: 8, text: '8%' },
{ x: 'Mexico', y: 3, text: '3%' },
{ x: 'Russia', y: 2, text: '2%' },
{ x: 'Miscellaneous', y: 1, text: '1%' }
];
this.legendSettings = { visible: true };
this.subTitle = {
fontFamily: "Arial",
fontStyle: 'italic',
fontWeight: 'regular',
color: "#E27F2D",
size: '13px'
};
}
render() {
return <AccumulationChartComponent id='charts' legendSettings={this.legendSettings} title='Oil and other liquid imports in USA' subTitle='In the year 2014 - 2015' legendSettings={{ visible: false } >
<AccumulationSeriesCollectionDirective>
<AccumulationSeriesDirective dataSource={this.data} xName='x' yName='y' subTitleStyle={this.subTitle} dataLabel={{
visible: true,
name: 'text',
font: {
fontWeight: '600'
}
}}>
</AccumulationSeriesDirective>
</AccumulationSeriesCollectionDirective>} AccumulationChartComponent>
}
};
ReactDOM.render(<App />, document.getElementById("charts"));
</>;
}
}