BenBiz

Bullet Chart Height Not Consistent

Recommended Posts

When creating bullet charts, the height is not consistent between multiple charts.  The image below shows several charts, all with a height specified, however some charts appear small and ignore the height property.  Is there a way to ensure the height is properly set?

 

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

 

image.png.c31da96ee7b06cab9b789dc66f8c5a91.png

Share this post


Link to post
Share on other sites

Hi BenBiz,

The height of the Bullet graph can be affected by various chart configuration attributes like chart margins and paddings.

Hence, we would suggest you to make sure that you disable all those attributes by commenting them out or you can provide same values for the chart margins and paddings across all the charts so that the height remains consistent in all the bullet charts.

Please refer to this demo: http://jsfiddle.net/srishti_fc/b3q9vjn6/1/


Hope this would help.

Thanks,
Srishti Jaiswal

Share this post


Link to post
Share on other sites

Thank you.  Changing some of the chart properties did help a little, but I still get some different sizes on smaller screens.  When I allow for full screen then everything seems to be ok.  So it seems to be that there is a minimum width in order for the heights to properly size.  Could this be the case?

"chartTopMargin": 0,
"chartLeftMargin": 0,
"chartRightMargin": 0,
"chartBottomMargin": 0

smaller screen:

image.png.99961a35307b8ae00ce23ddfe52c4a4c.png

 

full size screen:
image.png.4b759cf5ecd7476ffbd21ea374784489.png

Share this post


Link to post
Share on other sites

Hi BenBiz,

No, the chart width property does not affect the height of the bullet chart. Please follow the suggestions and demo shared previously and implement accordingly to resolve the issue.

Thanks,

Srishti

Share this post


Link to post
Share on other sites

Hi BenBiz,

No, the chart data values does not affect the chart height of the bullet chart even if it exceeds 1 million. Please follow the suggestions and demo shared previously and implement accordingly to resolve the issue.

Demo showing equal chart height with data exceeding 1 million: https://jsfiddle.net/srishti_fc/b3q9vjn6/2/

 

Thanks,

Srishti

Share this post


Link to post
Share on other sites

Srishti,

It looks like the solution was to add 

"formatNumberScale": "1"

This forces the number to display with a smaller number of digits and therefore takes care of the sizing issue caused by long number strings.

 

Thank you.

Share this post


Link to post
Share on other sites

Hi Ben,

Long labels take more space than smaller ones hence the space for the bullet plot was reducing in case of million data values.

We are glad that you got the solution which works for you as per your requirement.

 

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