Bullet Chart Height Not Consistent

[BenBiz]

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

 

[Srishti Jaiswal]

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

[BenBiz]

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:

 

full size screen:

[Srishti Jaiswal]

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

[BenBiz]

Thank you for the reply.  I believe I was able to figure out the issue. When the values exceed 1 million, the chart changes sizes.  This jsFiddle demonstrates the problem:  https://jsfiddle.net/BenBiz/mvoubf7e/35/  Is this expected or is there a solution?

[Srishti Jaiswal]

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

[BenBiz]

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.

[Srishti Jaiswal]

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