Customize Chart Appearance in React Spreadsheet

10 Jul 202620 minutes to read

Once a chart is inserted into the worksheet, you can customize its appearance and structure to make it clearer and more informative.

Move a Chart

To reposition a chart within the worksheet:

Click the chart to select it (selection handles appear around it).
Click and drag the chart to your desired location.
Release to place the chart in the new position.

Resize a Chart

To adjust the chart size:

Click the chart to select it.
Drag a middle edge handle to resize along a single axis — horizontally or vertically.
Release to apply the new size.

Access Chart Design Options

When a chart is selected, a Chart Design tab becomes available in the ribbon. This tab provides tools to modify chart elements and structure.

Add or Modify Chart Elements

Using the Add Chart Element option, you can enhance your chart with the following elements:

Axes and Axis Titles

Purpose — Clearly describe what your data values represent
When to use — Add when axis measurements are not immediately obvious
How to add — Chart Design tab → Add Chart Element → Axes → Select the desired axis type

Chart Title

Purpose — Explain what the chart represents at a glance
When to use — Always recommended for clarity
How to add — Chart Design tab → Add Chart Element → Chart Title → Choose a title style

Data Labels

Purpose — Display exact values directly on the chart
When to use — Helpful when precise values are important to viewers
How to add — Chart Design tab → Add Chart Element → Data Labels → Select label position

Gridlines

Purpose — Improve readability by providing a reference grid
When to use — Useful for charts with many data points
How to add — Chart Design tab → Add Chart Element → Gridlines → Select gridline type

Legends

Purpose — Identify and distinguish data series in multi-series charts
When to use — Essential when multiple data series are plotted
How to add — Chart Design tab → Add Chart Element → Legend → Choose legend position

Switch Data Orientation

If your chart is not displaying data as intended, you can reverse how rows and columns are interpreted:

Select the chart by clicking on it
Go to Chart Design tab in the ribbon
Click Switch Row/Column to flip the data orientation
Review the result — The chart now groups data differently

This is useful when:

You want to compare categories differently
Your data is organized differently than expected
You need to highlight different trends or patterns

Change Chart Type

To switch between chart types after creation:

Select the chart by clicking on it
Go to Chart Design tab in the ribbon
Click Chart Type option
Select a new type (Column, Bar, Line, Area, Pie, etc.)

Customization of line chart markers

Using the actionBegin event, you can change the shape, size, fill color, and border of the line chart marker. In the following example, you can see the modified marker appearance, such as shape and size, while creating the line chart with UI interaction.

app.jsx
app.tsx
datasource.jsx
datasource.tsx
import * as React from 'react';
import { createRoot } from 'react-dom/client';
import { SpreadsheetComponent, SheetsDirective, SheetDirective, RangesDirective, RowsDirective, RowDirective, CellDirective, CellsDirective, CellStyleModel, ChartModel } from '@syncfusion/ej2-react-spreadsheet';
import { RangeDirective, ColumnsDirective, ColumnDirective, getFormatFromType } from '@syncfusion/ej2-react-spreadsheet';
import { chartData } from './datasource';

function App() {
    const spreadsheetRef = React.useRef(null);
    const style = { backgroundColor: '#357cd2', color: '#fff', fontWeight: 'bold', textAlign: 'center', verticalAlign: 'middle' };
    const onActionBegin = (args) => {
        if (args.action === 'beforeInsertChart' && args.args.eventArgs.type.includes('Line')) {
            args.args.eventArgs.markerSettings.shape = 'Triangle';
            args.args.eventArgs.markerSettings.isFilled = false;
            args.args.eventArgs.markerSettings.size = 10;
        }
    }
    React.useEffect(() => {
        let spreadsheet = spreadsheetRef.current;
        if (spreadsheet) {
            spreadsheet.cellFormat({ backgroundColor: '#357cd2', color: '#fff', fontWeight: 'bold', textAlign: 'center' }, 'A3:F3');
            spreadsheet.numberFormat(getFormatFromType('Currency'), 'B4:F8');
            spreadsheet.merge('A1:F1');
        }
    }, []);

    return (
        <div>
            <SpreadsheetComponent ref={spreadsheetRef} actionBegin={onActionBegin}>
                <SheetsDirective>
                    <SheetDirective name='Book Sales'>
                        <RowsDirective>
                            <RowDirective height={30}>
                                <CellsDirective>
                                    <CellDirective value='Book Sales 2016-2020' style={style}></CellDirective>
                                </CellsDirective>
                            </RowDirective>
                            <RowDirective>
                                <CellsDirective>
                                    <CellDirective index={7}></CellDirective>
                                </CellsDirective>
                            </RowDirective>
                        </RowsDirective>
                        <RangesDirective>
                            <RangeDirective dataSource={chartData} startCell='A3' ></RangeDirective>
                        </RangesDirective>
                        <ColumnsDirective>
                            <ColumnDirective width={110}></ColumnDirective>
                            <ColumnDirective width={100}></ColumnDirective>
                            <ColumnDirective width={100}></ColumnDirective>
                            <ColumnDirective width={100}></ColumnDirective>
                            <ColumnDirective width={100}></ColumnDirective>
                            <ColumnDirective width={100}></ColumnDirective>
                        </ColumnsDirective>
                    </SheetDirective>
                </SheetsDirective>
            </SpreadsheetComponent>
        </div>
    );
};
export default App;

const root = createRoot(document.getElementById('root'));
root.render(<App />);
import * as React from 'react';
import { createRoot } from 'react-dom/client';
import { SpreadsheetComponent, SheetsDirective, SheetDirective, RangesDirective, RowsDirective, RowDirective, CellDirective, CellsDirective, CellStyleModel, ChartModel } from '@syncfusion/ej2-react-spreadsheet';
import { RangeDirective, ColumnsDirective, ColumnDirective, getFormatFromType, BeforeChartEventArgs} from '@syncfusion/ej2-react-spreadsheet';
import { chartData } from './datasource';

function App() {
    const spreadsheetRef = React.useRef<SpreadsheetComponent>(null);
    const style: CellStyleModel = { backgroundColor: '#357cd2', color: '#fff', fontWeight: 'bold', textAlign: 'center', verticalAlign: 'middle' };
    const onActionBegin = (args: BeforeChartEventArgs) : void => {
        if (args.action === 'beforeInsertChart' && args.args.eventArgs.type.includes('Line')) {
            args.args.eventArgs.markerSettings.shape = 'Triangle';
            args.args.eventArgs.markerSettings.isFilled = false;
            args.args.eventArgs.markerSettings.size = 10;
        }
    }
    React.useEffect(() => {
        let spreadsheet = spreadsheetRef.current;
        if (spreadsheet) {
            spreadsheet.cellFormat({ backgroundColor: '#357cd2', color: '#fff', fontWeight: 'bold', textAlign: 'center' }, 'A3:F3');
            spreadsheet.numberFormat(getFormatFromType('Currency'), 'B4:F8');
            spreadsheet.merge('A1:F1');
        }
    }, []);

    return (
        <div>
            <SpreadsheetComponent ref={spreadsheetRef} actionBegin={onActionBegin}>
                <SheetsDirective>
                    <SheetDirective name='Book Sales'>
                        <RowsDirective>
                            <RowDirective height={30}>
                                <CellsDirective>
                                    <CellDirective value='Book Sales 2016-2020' style={style}></CellDirective>
                                </CellsDirective>
                            </RowDirective>
                            <RowDirective>
                                <CellsDirective>
                                    <CellDirective index={7}></CellDirective>
                                </CellsDirective>
                            </RowDirective>
                        </RowsDirective>
                        <RangesDirective>
                            <RangeDirective dataSource={chartData} startCell='A3' ></RangeDirective>
                        </RangesDirective>
                        <ColumnsDirective>
                            <ColumnDirective width={110}></ColumnDirective>
                            <ColumnDirective width={100}></ColumnDirective>
                            <ColumnDirective width={100}></ColumnDirective>
                            <ColumnDirective width={100}></ColumnDirective>
                            <ColumnDirective width={100}></ColumnDirective>
                            <ColumnDirective width={100}></ColumnDirective>
                        </ColumnsDirective>
                    </SheetDirective>
                </SheetsDirective>
            </SpreadsheetComponent>
        </div>
    );
};
export default App;

const root = createRoot(document.getElementById('root')!);
root.render(<App />);
/**
 * Chart data source
 */
export let chartData = [
    { 'Book': 'Classics', 'Year 2016': 19033, 'Year 2017': 78453, 'Year 2018': 24354, 'Year 2019': 18757, 'Year 2020': 34343 },
    { 'Book': 'Mystery', 'Year 2016': 50400, 'Year 2017': 82311, 'Year 2018': 131003, 'Year 2019': 19899, 'Year 2020': 42200 },
    { 'Book': 'Romance', 'Year 2016': 18002, 'Year 2017': 49529, 'Year 2018': 79567, 'Year 2019': 12302, 'Year 2020': 21277 },
    { 'Book': 'Sci-Fi & Fantasy', 'Year 2016': 10033, 'Year 2017': 51200, 'Year 2018': 66211, 'Year 2019': 12899, 'Year 2020': 18779 },
    { 'Book': 'Horror', 'Year 2016': 23454, 'Year 2017': 78665, 'Year 2018': 81232, 'Year 2019': 19888, 'Year 2020': 20986 }
];
/**
 * Chart data source
 */
export let chartData: Object[] = [
    { 'Book': 'Classics', 'Year 2016': 19033, 'Year 2017': 78453, 'Year 2018': 24354, 'Year 2019': 18757, 'Year 2020': 34343 },
    { 'Book': 'Mystery', 'Year 2016': 50400, 'Year 2017': 82311, 'Year 2018': 131003, 'Year 2019': 19899, 'Year 2020': 42200 },
    { 'Book': 'Romance', 'Year 2016': 18002, 'Year 2017': 49529, 'Year 2018': 79567, 'Year 2019': 12302, 'Year 2020': 21277 },
    { 'Book': 'Sci-Fi & Fantasy', 'Year 2016': 10033, 'Year 2017': 51200, 'Year 2018': 66211, 'Year 2019': 12899, 'Year 2020': 18779 },
    { 'Book': 'Horror', 'Year 2016': 23454, 'Year 2017': 78665, 'Year 2018': 81232, 'Year 2019': 19888, 'Year 2020': 20986 }
];

Search docs

Ask Syncfusion AI Assistant