Segment space

[Amos]

Hi

When setting a chart with multiple series (of columns for example), the grouped columns appear one besides the other without any spacing between them. The space is only between categories.

I saw in WPF an option for SegmentSpace but I didn't see any equivalent in Vue.

Is there such option? If not, is it possible to add it?

Thanks

[Srihari Muthukaruppan]

Hi Amos, 

  

We have analyzed your query. From that, we would like to let you know that we can achieve your requirement by using columnSpacing property in the chart. We have also prepared a sample for your reference. Please find the below code snippet and screenshot. 

  

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/ColumnSpacing255873100.zip 

  

Code Snippet: 

 App.vue: 

      

<ejs-chart > 

    <e-series-collection> 

           <e-series :dataSource='seriesData' type='Column' columnSpacing='0.1' xName='x' yName='y' > </e-series> 

           <e-series :dataSource='seriesData1' type='Column' columnSpacing='0.1' xName='x' yName='y' > </e-series> 

           <e-series :dataSource='seriesData2' type='Column' columnSpacing='0.1' xName='x' yName='y' > </e-series> 

    </e-series-collection> 

</ejs-chart> 

  

Screenshot: 

 

  

If still, this is not your exact requirement. kindly revert us with more information which will be helpful for further analysis and provide you solution sooner. 

  

Regards,
Srihari 

[Amos]

Thanks, works!

[Srihari Muthukaruppan]

Hi Amos,  

  

Most welcome. Kindly get in touch with us, if you would require further assistance. We are always happy in assisting you.    

    

Thanks,    

Srihari M