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

[BenBiz]

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}
/>

 

[Srishti Jaiswal]

Hi BenBiz,

Please share a sample replicating the issue you are facing so that we can assist you further.

Also, please elaborate the problem for better understanding.

Stacked Bar 2D Chart Sample: http://jsfiddle.net/srishti_fc/v9f4rs38/

Thanks,

Srishti

[BenBiz]

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/

[Srishti Jaiswal]

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

[BenBiz]

Srishti,

"yAxisMaxValue", looks like it solved the problem.  Thank you.

[Srishti Jaiswal]

On 2/25/2021 at 2:13 AM, BenBiz said:

Srishti,

"yAxisMaxValue", looks like it solved the problem.  Thank you.

Thanks for the acknowledgement. Glad it worked. Welcome.