BenBiz

Horizontal Bar inner, <rect>, element does not fill container, <svg>, element width.

Recommended Posts

When creating a horizontal bar chart, the bar width does not fill the container.  In my example the svg element (and container) have a 563px width.  However, the rectangle (rect) element inside the svg only has a 485px width.  The images below show chrome dev tools illustrating the problem.  Also, this does not happen in every case.  This example has two bar charts on top of each other.  The first renders almost the full width but the second, pictured below, does not.  The only difference in the code between the two is the values in the dataSource, yet they render different widths.

 

How can I guarantee that the chart width will be consistent and fill the container?  

 

<ReactFusioncharts
  type={'stackedbar2d'}
  width="100%"
  height={80}
  dataFormat="JSON"
  dataSource={dataSource}
/>

 

image.png.c6a6d731e8661a41ed89d323b4461f81.pngimage.png.298e0f7fa50df3eebce9b78ff884dd42.png

Share this post


Link to post
Share on other sites

Thank you for the reply.  This fiddle demonstrates the issue.  There are 3 horizontal bar charts in the example.  Each chart has a different width.  I realize the data is different for each chart, however they are all in separate containers and I would expect that each chart would render according to its own container (full width).  They seem to be dependent on each other still even though they are rendered separately, and are separate chart objects.  The rectangle does not fill the full svg dom element width.  

 

https://jsfiddle.net/q6xr9kca/

Share this post


Link to post
Share on other sites

Hi Ben,

Since the charts has different set of data values, their Y axis limits are automatically calculated and each chart has different limits as per their data.

The chart is rendering correctly taking the full 100% width of the container and respecting it's axis limits (turn on the "showLimits" attribute to understand the behaviour).

 However, if you need to render them taking the full width, you need to modify the "yAxisMaxValue" attribute to match the sum of the two dataset values.

Please refer to this demo: https://jsfiddle.net/srishti_fc/guksrjep/

 

Hope this will help.

thanks,

Srishti

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now