Title and sub title in React Accumulation chart component

28 Mar 202524 minutes to read

Title

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, AccumulationLegend } from '@syncfusion/ej2-react-charts';
function App() {
    const 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%' }
    ];
    const legendSettings = { visible: true };
    return <AccumulationChartComponent id='charts' legendSettings={legendSettings} title='Oil and other liquid imports in USA'>
  <Inject services={[AccumulationLegend]}/>
      <AccumulationSeriesCollectionDirective>
        <AccumulationSeriesDirective dataSource={data} xName='x' yName='y' dataLabel={{
            visible: true,
            name: 'text',
            font: {
                fontWeight: '600'
            }
        }}>
        </AccumulationSeriesDirective>
      </AccumulationSeriesCollectionDirective>
    </AccumulationChartComponent>;
}
;
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));
import * as React from "react";
import * as ReactDOM from "react-dom";
import { AccumulationChartComponent, AccumulationSeriesCollectionDirective, AccumulationSeriesDirective,
 Inject, LegendSettingsModel, AccumulationLegend } from'@syncfusion/ej2-react-charts';

function App() {

  const 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%' }];

  const legendSettings: LegendSettingsModel = { visible: true };

  return <AccumulationChartComponent id='charts' legendSettings={legendSettings} title='Oil and other liquid imports in USA'>
  <Inject services={[AccumulationLegend]} />
      <AccumulationSeriesCollectionDirective>
        <AccumulationSeriesDirective dataSource={data} xName='x' yName='y' dataLabel={{
                visible: true,
                name: 'text',
                font: {
                  fontWeight: '600'
                }
              }}>
        </AccumulationSeriesDirective>
      </AccumulationSeriesCollectionDirective>
    </AccumulationChartComponent>

};
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));

Title customization

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, AccumulationLegend } from '@syncfusion/ej2-react-charts';
function App() {
    const 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%' }
    ];
    const legendSettings = { visible: true };
    const title = {
        fontFamily: "Arial",
        fontStyle: 'italic',
        fontWeight: 'regular',
        color: "#E27F2D",
        size: '23px'
    };
    return <AccumulationChartComponent id='charts' legendSettings={legendSettings} title='Oil and other liquid imports in USA' subTitle='In the year 2014 - 2015' titleStyle={title}>
    <Inject services={[AccumulationLegend]}/>
      <AccumulationSeriesCollectionDirective>
        <AccumulationSeriesDirective dataSource={data} xName='x' yName='y' dataLabel={{
            visible: true,
            name: 'text',
            font: {
                fontWeight: '600'
            }
        }}>
        </AccumulationSeriesDirective>
      </AccumulationSeriesCollectionDirective>
    </AccumulationChartComponent>;
}
;
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));
import * as React from "react";
import * as ReactDOM from "react-dom";
import { AccumulationChartComponent, AccumulationSeriesCollectionDirective, AccumulationSeriesDirective,
 Inject, LegendSettingsModel, AccumulationLegend } from'@syncfusion/ej2-react-charts';

function App() {

  const 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%' }];

  const legendSettings: LegendSettingsModel = { visible: true };
  const title: any = {
                          fontFamily: "Arial",
                          fontStyle: 'italic',
                          fontWeight: 'regular',
                          color: "#E27F2D",
                          size: '23px'
                         };

    return <AccumulationChartComponent id='charts' legendSettings={legendSettings} title='Oil and other liquid imports in USA' subTitle ='In the year 2014 - 2015' titleStyle={title}>
    <Inject services={[AccumulationLegend]} />
      <AccumulationSeriesCollectionDirective>
        <AccumulationSeriesDirective dataSource={data} xName='x' yName='y' dataLabel={{
                visible: true,
                name: 'text',
                font: {
                  fontWeight: '600'
                }
              }}>
        </AccumulationSeriesDirective>
      </AccumulationSeriesCollectionDirective>
    </AccumulationChartComponent>

};
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));

Position

The position property customizes the placement of the accumulation chart title. It supports the following options: Right, Left, Bottom, Top, and Custom. The Custom option allows you to position the title anywhere on the chart using x and y coordinates, providing flexible title alignment based on layout requirements.

import * as React from "react";
import * as ReactDOM from "react-dom";
import { AccumulationChartComponent, AccumulationSeriesCollectionDirective, AccumulationSeriesDirective, Inject, AccumulationLegend } from '@syncfusion/ej2-react-charts';
function App() {
    const 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%' }
    ];
    const legendSettings = { visible: true };
    const title = {
        fontFamily: "Arial",
        fontStyle: 'italic',
        fontWeight: 'regular',
        color: "#E27F2D",
        size: '23px'
    };
    return <AccumulationChartComponent id='charts' legendSettings={legendSettings} title='Oil and other liquid imports in USA' subTitle='In the year 2014 - 2015' titleStyle={title}>
    <Inject services={[AccumulationLegend]}/>
      <AccumulationSeriesCollectionDirective>
        <AccumulationSeriesDirective dataSource={data} xName='x' yName='y' dataLabel={{
            visible: true,
            name: 'text',
            font: {
                fontWeight: '600'
            }
        }}>
        </AccumulationSeriesDirective>
      </AccumulationSeriesCollectionDirective>
    </AccumulationChartComponent>;
}
;
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));
import * as React from "react";
import * as ReactDOM from "react-dom";
import { AccumulationChartComponent, AccumulationSeriesCollectionDirective, AccumulationSeriesDirective,
 Inject, LegendSettingsModel, AccumulationLegend } from'@syncfusion/ej2-react-charts';

function App() {

  const 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%' }];

  const legendSettings: LegendSettingsModel = { visible: true };
  const title: any = {
                          fontFamily: "Arial",
                          fontStyle: 'italic',
                          fontWeight: 'regular',
                          color: "#E27F2D",
                          size: '23px',
                          position: 'Bottom'
                         };

    return <AccumulationChartComponent id='charts' legendSettings={legendSettings} title='Oil and other liquid imports in USA' subTitle ='In the year 2014 - 2015' titleStyle={title}>
    <Inject services={[AccumulationLegend]} />
      <AccumulationSeriesCollectionDirective>
        <AccumulationSeriesDirective dataSource={data} xName='x' yName='y' dataLabel={{
                visible: true,
                name: 'text',
                font: {
                  fontWeight: '600'
                }
              }}>
        </AccumulationSeriesDirective>
      </AccumulationSeriesCollectionDirective>
    </AccumulationChartComponent>

};
export default App;
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.

import * as React from "react";
import * as ReactDOM from "react-dom";
import { AccumulationChartComponent, AccumulationSeriesCollectionDirective, AccumulationSeriesDirective, Inject, AccumulationLegend } from '@syncfusion/ej2-react-charts';
function App() {
    const 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%' }
    ];
    const legendSettings = { visible: true };
    return <AccumulationChartComponent id='charts' legendSettings={legendSettings} title='Oil and other liquid imports in USA' subTitle='In the year 2014 - 2015'>
  <Inject services={[AccumulationLegend]}/>
      <AccumulationSeriesCollectionDirective>
        <AccumulationSeriesDirective dataSource={data} xName='x' yName='y' dataLabel={{
            visible: true,
            name: 'text',
            font: {
                fontWeight: '600'
            }
        }}>
        </AccumulationSeriesDirective>
      </AccumulationSeriesCollectionDirective>
    </AccumulationChartComponent>;
}
;
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));
import * as React from "react";
import * as ReactDOM from "react-dom";
import { AccumulationChartComponent, AccumulationSeriesCollectionDirective, AccumulationSeriesDirective,
 Inject, LegendSettingsModel, AccumulationLegend } from'@syncfusion/ej2-react-charts';

function App() {

  const 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%' }];

  const legendSettings: LegendSettingsModel = { visible: true };

  return <AccumulationChartComponent id='charts' legendSettings={legendSettings} title='Oil and other liquid imports in USA' subTitle ='In the year 2014 - 2015'>
  <Inject services={[AccumulationLegend]} />
      <AccumulationSeriesCollectionDirective>
        <AccumulationSeriesDirective dataSource={data} xName='x' yName='y' dataLabel={{
                visible: true,
                name: 'text',
                font: {
                  fontWeight: '600'
                }
              }}>
        </AccumulationSeriesDirective>
      </AccumulationSeriesCollectionDirective>
    </AccumulationChartComponent>

};
export default App;
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.

import * as React from "react";
import * as ReactDOM from "react-dom";
import { AccumulationChartComponent, AccumulationSeriesCollectionDirective, AccumulationSeriesDirective, Inject, AccumulationLegend } from '@syncfusion/ej2-react-charts';
function App() {
    const 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%' }
    ];
    const legendSettings = { visible: true };
    const subTitle = {
        fontFamily: "Arial",
        fontStyle: 'italic',
        fontWeight: 'regular',
        color: "#E27F2D",
        size: '13px'
    };
    return <AccumulationChartComponent id='charts' legendSettings={legendSettings} title='Oil and other liquid imports in USA' subTitle='In the year 2014 - 2015' subTitleStyle={subTitle}>
  <Inject services={[AccumulationLegend]}/>
      <AccumulationSeriesCollectionDirective>
        <AccumulationSeriesDirective dataSource={data} xName='x' yName='y' dataLabel={{
            visible: true,
            name: 'text',
            font: {
                fontWeight: '600'
            }
        }}>
        </AccumulationSeriesDirective>
      </AccumulationSeriesCollectionDirective>
    </AccumulationChartComponent>;
}
;
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));
import * as React from "react";
import * as ReactDOM from "react-dom";
import { AccumulationChartComponent, AccumulationSeriesCollectionDirective, AccumulationSeriesDirective,
 Inject,LegendSettingsModel, AccumulationLegend } from'@syncfusion/ej2-react-charts';

function App() {

  const 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%' }];

  const legendSettings: LegendSettingsModel = { visible: true };
  const subTitle: any = {
                          fontFamily: "Arial",
                          fontStyle: 'italic',
                          fontWeight: 'regular',
                          color: "#E27F2D",
                          size: '13px'
                         };

  return <AccumulationChartComponent id='charts' legendSettings={legendSettings} title='Oil and other liquid imports in USA' subTitle ='In the year 2014 - 2015' subTitleStyle={subTitle}>
  <Inject services={[AccumulationLegend]} />
      <AccumulationSeriesCollectionDirective>
        <AccumulationSeriesDirective dataSource={data} xName='x' yName='y' dataLabel={{
                visible: true,
                name: 'text',
                font: {
                  fontWeight: '600'
                }
              }}>
        </AccumulationSeriesDirective>
      </AccumulationSeriesCollectionDirective>
    </AccumulationChartComponent>

};
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));

Position

The position property customizes the placement of the accumulation chart subtitle. It supports the following options: Right, Left, Bottom, Top, and Custom. The Custom option allows you to position the subtitle anywhere on the chart using x and y coordinates, providing flexible subtitle alignment based on layout requirements.

import * as React from "react";
import * as ReactDOM from "react-dom";
import { AccumulationChartComponent, AccumulationSeriesCollectionDirective, AccumulationSeriesDirective, Inject, AccumulationLegend } from '@syncfusion/ej2-react-charts';
function App() {
    const 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%' }
    ];
    const legendSettings = { visible: true };
    const title = {
        fontFamily: "Arial",
        fontStyle: 'italic',
        fontWeight: 'regular',
        color: "#E27F2D",
        size: '23px'
    };
    return <AccumulationChartComponent id='charts' legendSettings={legendSettings} title='Oil and other liquid imports in USA' subTitle='In the year 2014 - 2015' titleStyle={title}>
    <Inject services={[AccumulationLegend]}/>
      <AccumulationSeriesCollectionDirective>
        <AccumulationSeriesDirective dataSource={data} xName='x' yName='y' dataLabel={{
            visible: true,
            name: 'text',
            font: {
                fontWeight: '600'
            }
        }}>
        </AccumulationSeriesDirective>
      </AccumulationSeriesCollectionDirective>
    </AccumulationChartComponent>;
}
;
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));
import * as React from "react";
import * as ReactDOM from "react-dom";
import { AccumulationChartComponent, AccumulationSeriesCollectionDirective, AccumulationSeriesDirective,
 Inject, LegendSettingsModel, AccumulationLegend } from'@syncfusion/ej2-react-charts';

function App() {

  const 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%' }];

  const legendSettings: LegendSettingsModel = { visible: true };
  const title: any = {
                          fontFamily: "Arial",
                          fontStyle: 'italic',
                          fontWeight: 'regular',
                          color: "#E27F2D",
                          size: '23px',
                          position: 'Bottom'
                         };

    return <AccumulationChartComponent id='charts' legendSettings={legendSettings} title='Oil and other liquid imports in USA' subTitle ='In the year 2014 - 2015' titleStyle={title}>
    <Inject services={[AccumulationLegend]} />
      <AccumulationSeriesCollectionDirective>
        <AccumulationSeriesDirective dataSource={data} xName='x' yName='y' dataLabel={{
                visible: true,
                name: 'text',
                font: {
                  fontWeight: '600'
                }
              }}>
        </AccumulationSeriesDirective>
      </AccumulationSeriesCollectionDirective>
    </AccumulationChartComponent>

};
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));