Char Area in stacked bar

[Marco]

Hi support,

I am using a stackedBar100 chart to display 1 row of data. is it possible to remove the top and the bottom part of the rendered chart, to leave only the data row? 

For example, in the attached image i would like to remove the skyblue area.

Thank you

best regards

Attachment: stackedbarchart_a4d0200.7z

[Dharanidharan Dharmasivam]

Hi Marco, 

 

We have analyzed your query with the provided screenshot. We are not clear on which part you need to remove after the chart renders, since you have mentioned that top and bottom and need to remove skyblue area.  

 

Screenshot 1: 

 

 

Screenshot 2:  

 

 

We would like to know from the above screenshots, which part you would need to remove after the chart renders. Also, we would like to know with the provided screenshot, is the skyblue area a part of chart or not a part of chart area. This will be much helpful in further analysis on the possible solutions for your scenario and we can provide you the solution at earlier, 

 

Thanks, 

Dharani. 

[Marco]

Hi Dharani,

thanks for your reply. I'm sorry, I'll attach you a screenshot with the chart area parts I would like to remove (

the interior of the areas surrounded by red).

Thank you

best regards

[Dharanidharan Dharmasivam]

Hi Marco, 

 

Thanks for the provided information. 

 

We have analyzed your query. Your requirement can be achieved by using the elementSpacing, margin properties and with the plotOffset property of the axis. Here we need to specify the elementSpacing as well as margin (top, bottom, left and right) to zero. Then with respect to your container height, you need to specify the plotOffset of the axis, to remove the space at the top and bottom of the bar. Find the code snippet below to achieve this requirement. 

 

 

$("#container").ejChart({ 

            primaryXAxis: 

            { 

              //... 

              plotOffset:-50                        

            }, 

            elementSpacing:0, 

            margin: { left: 0, right: 0, top: 0, bottom: 0 }, 

}); 

 

 

 

Screenshot: 

 

Sample for reference can be find from below. 

http://jsplayground.syncfusion.com/ojnk2ylo  

 

Thanks, 

Dharani.