We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

With Stacked Column Chart, cannot remove the spacing between bars.


I am trying to remove the space between the consecutive data point using Stacked Column Chart, as per the requirements of the project. 

I have tried;

Setting `Width` property on the `CommonSeriesOptionsBuilder` , on the `SeriesBuilder`, on each point added to the Series.

Maybe a tricky way, Using regular Column Chart with a pair of series, of which one is added to another in element-wise fashion. Setting the SideBySide property to `false`,  then using

$('#container').ejChart('option', { commonSeriesOptions: { columnSpacing: 0 } });
$('#container').ejChart('option', { commonSeriesOptions: { columnWidth: 1 } });
To no avail. 
Is this case covered by Syncfusion Charts? If so how can I achieve the effect?
The image attached can give you a clearer view on the requirements.
Thanks in advance.

Attachment: Capture_e54d2b26.zip

3 Replies

SK Sanjith Kesavan Syncfusion Team May 13, 2016 09:22 AM UTC

Hi Mehmet, 

Thanks for contacting Syncfusion support. We have analyzed your query and screenshot. To remove the space between the consecutive data points in the stacked column chart, please follow the below code. 

.CommonSeriesOptions(cr => cr.Type(SeriesType.StackingColumn).EnableAnimation(true).ColumnSpacing(0).ColumnWidth(1).Tooltip(tt => tt.Visible(true) 
        .Format("#series.name#  <br/> #point.x# : #point.y# Million Visitors"))) 
In the above code, we have set the columnSpacing as 0 and columnwidth as 1. By default, border width for the series is 1 and border color is transparent, so this will leave some space between the points, to avoid this, please set the same color for border and series. Please find the below screenshot. 
In the below link, we have attached sample for your reference.  


MM mehmet m May 26, 2016 12:27 PM UTC

When I tried your solution I got: 

CS1061: 'Syncfusion.JavaScript.DataVisualization.CommonSeriesOptionsBuilder' does not contain a definition for 'ColumnSpacing' and no extension method 'ColumnSpacing' accepting a first argument of type 'Syncfusion.JavaScript.DataVisualization.CommonSeriesOptionsBuilder' could be found (are you missing a using directive or an assembly reference?)

Copy pasting the Chart code to existing project resulted in the same error being raised. Is this a version issue, if so which version should I be using?

SK Sanjith Kesavan Syncfusion Team May 27, 2016 11:52 AM UTC

Hi Mehmet, 

We have analyzed your query. We have provided the ColumnSpacing and ColumnWidth support from Essential studio version. If you are using Essential studio prior to this version, then please update your Essential Studio to the current version (  


Live Chat Icon For mobile
Up arrow icon