React
EditEdit This Document
Demos
Support
Forum
Upgrade Guide
FREE TRIAL
Search results

Title and Subtitle in React Accumulation Chart component

03 Dec 2021 / 4 minutes to read

Accumulation Chart can be given a title using title property, to show the information about the data plotted.

Source
Preview
index.tsx
index.jsx
Copied to clipboard
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"));
Copied to clipboard
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"));


</>;
    }
}

Title Customization

Accumulation Chart can be customizing a title using titleStyle property.

Source
Preview
index.tsx
index.jsx
Copied to clipboard
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"));
Copied to clipboard
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"));


</>;
    }
}

SubTitle

Accumulation Chart can be given a subtitle using subTitle property, to show the information about the data plotted.

Source
Preview
index.tsx
index.jsx
Copied to clipboard
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"));
Copied to clipboard
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"));


</>;
    }
}

SubTitle Customization

Accumulation Chart can be customizing a subtitle using subTitleStyle property, to show the information about the data plotted.

Source
Preview
index.tsx
index.jsx
Copied to clipboard
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"));
Copied to clipboard
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"));


</>;
    }
}
Previous
Next