How to increase or decrease spacing in column series in React Chart?

This article explains how to increase or decrease the spacing in the column series in React Chart.

Customize the spacing of the column series

You can use the columnSpacing property to adjust the spacing between columns, and it accepts values ranging from 0 to 1. By default, it is set to 0.

In the following code example, the column spacing is set to 0.4 and 0.8.

Index.js

import { createRoot } from 'react-dom/client';
import * as React from 'react';
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, Legend, Category, ColumnSeries,
Highlight } from '@syncfusion/ej2-react-charts';

const ColumnSpacing = () => {
return (
     <chartcomponent id="charts" legendsettings="{{" enablehighlight:="" true="" }}="" primaryxaxis="{{" valuetype:="" 'category'="" primaryyaxis="{{" edgelabelplacement:="" 'shift',="" title:="" 'sales="" (in="" percentage)'="" title="Sales Comparison">
       <inject services="{[ColumnSeries," legend,="" category,="" highlight]}="">
       <seriescollectiondirective>
         <seriesdirective datasource="{data}" xname="x" yname="y" type="Column" columnspacing="{0.4}">
         <seriesdirective datasource="{data}" xname="x" yname="y1" type="Column" columnspacing="{0.8}">
       </seriesdirective></seriesdirective></seriescollectiondirective>
     </inject></chartcomponent>
   );
};
export default ColumnSpacing;

const root = createRoot(document.getElementById('sample'));
root.render(<columnspacing>);

The following screenshot portrays the results of the code snippet mentioned above.

Screenshot:

View Sample in Stackblitz

Conclusion

I hope you enjoyed learning how to increase or decrease the spacing of the column series in React Chart.

You can refer to our React Chart feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our React Chart example to understand how to create and manipulate data.

For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.

If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, support portal, or feedback portal. We are always happy to assist you!