Stacked BarChart with annotations

Created using FusionCharts Suite XT - www.fusioncharts.com

by Nabajeet Sonowal

HTML

<script src="http://static.fusioncharts.com/code/latest/fusioncharts.js"></script>
<script src="http://static.fusioncharts.com/code/latest/fusioncharts.charts.js"></script>
<script src="http://static.fusioncharts.com/code/latest/themes/fusioncharts.theme.fint.js"></script>
<!-- This sample is rendered using XML as its data format. Note that this is the same chart and data used in the section "Creating your first chart" to help compare. -->
<div id="chart-container">FusionCharts will render here</div>

JavaScript

FusionCharts.ready(function () {
    var revenueChart = new FusionCharts({
        type: 'stackedbar2d',
        renderAt: 'chart-container',
        width: '700',
        height: '300',
        dataFormat: 'xml',
        dataSource: '<chart caption="Product-wise quarterly revenue in current year" subcaption="Harry&#39;s SuperMart" xaxisname="Quarter" yaxisname="Revenue (In USD)" numberprefix="$" palettecolors="#0075c2,#1aaf5d" bgcolor="#ffffff" borderalpha="20" showcanvasborder="0" useplotgradientcolor="0" plotborderalpha="10" legendborderalpha="0" legendshadow="0" valuefontcolor="#ffffff" showxaxisline="1" xaxislinecolor="#999999" divlinecolor="#999999" divlinedashed="1" showalternatevgridcolor="0" subcaptionfontbold="0" subcaptionfontsize="14" showhovereffect="1" yAxisMaXValue="5000000">\
    <categories>\
        <category label="Q1" />\
        <category label="Q2" />\
        <category label="Q3" />\
        <category label="Q4" />\
    </categories>\
        <annotations>\
		<annotationgroup id="infobar">\
			<annotation id="label1" type="text" text="12&lt;br&gt;Decemjkjkasljdklasjlkdjaslkdjkasjdkl;asjlkdjaslkdjlkasjdlkasjlkdjaslkdjaslkjdlkasjdlkaskdklsakdl;askldkasldklaskdlkaldklaskdlaskldkaldkaslldkladkl;askl;dkasl;dkal;skdl;askl;dkasl;kdl;asdaskdlkkdalkdl;askd;lkas;ldkl;ber&lt;br&gt;2014" fillcolor="#6baa01" x="$dataset.1.set.3.endx" y="$dataset.1.set.0.y"/>\
		</annotationgroup>\
	</annotations>\
    <dataset seriesname="Food Products">\
        <set value="121000" />\
        <set value="135000" />\
        <set value="123500" />\
        <set value="145000" />\
    </dataset>\
    <dataset seriesname="Non-Food Products">\
        <set value="131400" />\
        <set value="154800" />\
        <set value="98300" />\
        <set value="131800" />\
    </dataset>\
</chart>'
    })
    .render();
});