FusionChandu

How to display the data on top of Bar chart bar always

Recommended Posts

Hello all,

 

 

I have a bar chart with less width ranging from lower values to higher values. But in some cases, bar values or placing inside the bar. Because of the range and height of the chart ..some times

bar values or inside the bar..which is readable to the client. 

 

Please find attached image chart...In case if you have any resolution ..Please help us.

 

     

post-68848-0-92295400-1461875372_thumb.png

Share this post


Link to post
Share on other sites
On 5/1/2016 at 11:18 PM, Gagan Sikri said:

Hi

 

You have to specify chart attribute `placeValuesInside` and its value as `0` to display all the values outside data plot (column). Please refer to this JSFiddle sample for the same: http://jsfiddle.net/s7t8F/1461/

This doesn't work if the bar is too big. Is there another fix for this? I've tried the adding the padding and margins properties to my chart, but the value is still placed inside the bar.

Share this post


Link to post
Share on other sites

Hi Israel,

 

Yes, when data plot value is large and close to the maximum Y-axis value the value is showing inside through the attribute "placeValuesInside" attribute is set as "0".

In that case you can set the "canvasTopPadding" attribute to add additional space on top of the canvas to display the value on top of the columns. Please check the below sample fiddle for reference :

http://jsfiddle.net/e1ys2kar/8/

Please note : For bar(horizontal) visualization use "canvasRightPadding" attribute instead.

 

Thanks,

Akash.

Share this post


Link to post
Share on other sites

Hi,

I am creating a Bar chart (bar2d) as shown in attached screenshot. The requirement is to put the number on top of the horizontal bars.

You can 16.1% is on top of the bar & aligned to the right.

Is there any chart attributes to achieve this? If not then please suggest any workaround. 

Thanks,

Dipak Rathod

bar_graph_wth_numbers_on_top_of bars.png

Share this post


Link to post
Share on other sites

Hi Dipak,

 

The data value displayed on the data plots cannot be positioned at the top of the data plots natively.

As a work-around you can use Text annotation to display custom string anywhere on the chart by positioning it using the "x" and "y" configuration attributes to set its co-ordinates in pixels.

Please check the below documentation link for reference :

https://www.fusioncharts.com/dev/chart-guide/chart-configurations/annotations/creating-annotations/create-text-annotations

Sample fiddle for reference : https://jsfiddle.net/us1ohfg2/3/

 

Please note : Annotations are static in nature.

 

Thanks,

Akash.

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