CODEWITHSUNDEEP
fusioncharts
oivoodoo
oivoodoo

Reputation: 794

Show label on the top of bar2d by fusioncharts

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.

Upvotes: 0

Views: 2730

Answers (1)

Pablo
Pablo

Reputation: 56

Natively, FusionCharts does not support this feature. However, what makes FusionCharts really amazing is the number of workaround or 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.

<?xml version="1.0" encoding="UTF-8"?>
<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="&#xA;&#xA;&#xA;&#xA;Feb" />
   <set label="" value="857" />
   <set label="" value="0" alpha="0.1" displayValue="&#xA;&#xA;&#xA;&#xA;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 &amp;#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.

<?xml version="1.0" encoding="UTF-8"?>
<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

Upvotes: 1

Related Questions