Show label on the top of bar2d by fusioncharts

Question

Hi, everyone.

How can I show label on the top of the line in the bar2d graphic?

For example:

|-------------------------
| This is line!
|================= 70%
|
| This is line 2!
|====== 30%
|-------------------------

Thanks.

Answer 1

Hi there,

Natively, FusionCharts does not support this feature. However, what makes FusionCharts really amazing is the number of workaround(s)/tweaks you can come up with to address an issue(makes my job easier too :)

Please try out the following XML snippet using a Single series Bar 2D chart.

---

<chart caption='Monthly Unit Sales' xAxisName='Month' yAxisName='Units' showValues='1' decimals='0' formatNumberScale='0' chartRightMargin='30' > <set label='' value='0' alpha='0.1' displayValue='&#10;&#10;&#10;&#10;Feb'/> <set label='' value='857' /> <set label='' value='0' alpha='0.1' displayValue='&#10;&#10;&#10;&#10;Apr' /> <set label='' value='494' /> </chart>

---

What we have done here is used empty and invisible data-plot above the data-plots we want to showcase with the Label on top. Thereby, using the 'displayValue' attribute in the invisible data-plot, we can recreate the visual effect of the Labels being on-top of the data-plot being displayed.

Note: The character '&#10;'(new line break) has been used to bring the output of the 'displayValue' attribute, i.e. the apparent Label in this case, closer to the data-plot below.

Alternatively, you may also use the Multi-series Bar 2D chart to re-create the above mentioned effect, using the XML snippet quoted below.

---

<chart palette='2' caption='Business Results: 2005' yaxisname='Revenue (Millions)' hovercapbg='FFFFFF' toolTipBorder='889E6D' divLineColor='999999' divLineAlpha='80' showShadow='0' canvasBgColor='FEFEFE' canvasBaseColor='FEFEFE' canvasBaseAlpha='50' divLineIsDashed='1' divLineDashLen='1' divLineDashGap='2' numberPrefix='$' numberSuffix='M' chartRightMargin='30' useRoundEdges='1' legendBorderAlpha='0'> <categories> <category label=''/> <category label='' /> <category label='' /> </categories> <dataset seriesname='Domestic' color='8EAC41'> <set value='0' alpha='0.1' displayValue='Hardware'/> <set value='0' alpha='0.1' displayValue='Software'/> <set value='0' alpha='0.1' displayValue='Service'/> </dataset> <dataset seriesname='International' color='607142' > <set value='116' /> <set value='237' /> <set value='83' /> </dataset> </chart>

---

I hope this helps. :D