Place values above the graph for Multi series Column chart - fusioncharts

Question

I am trying to place the values for one of the series in a 2 series stacked column chart. I tried to use properties as shown in this link Data Values Properties but I dont see the changes being applied on the chart.
I need the values to be on top only for one of the series but not both.
Here is the screen shot of the graph. I need to place the values for the second series highlighted, since they are not clearly visible in this graph.
Here is the fiddle where I attempted to achieve this. JS Fiddle Demo
My XML is below:
<chart labelDisplay='ROTATE' useRoundEdges='0' slantLabels='1'
formatNumber='1' formatNumberScale='0' plotGradientColor=''
showValues='1' valuePosition='ABOVE'
caption='Total Call vs LTL Call'>
<categories>
<category label='01AUG2014' />
<category label='02AUG2014' />
<category label='03AUG2014' />
</categories>
<dataset seriesName='TOTAL_CALL' color='FFFFCC'>
<set value=' 11708' />
<set value=' 7675' />
<set value=' 8210' />
</dataset>
<dataset seriesName='LTL_TOTAL' color='800000'>
<set value=' 158' />
<set value=' 80' />
<set value=' 34' />
</dataset>
</chart>
Note: I am using Fusion Charts V3.0

Answer 1

For Stacked Column, it is not feasible to show values for one dataset on top. Instead, try using Text Annotations, to place the values of second dataset on top of the data plot.
Please check the JSFiddle here
FusionCharts.ready(function () {
var revenueChart = new FusionCharts({
type: 'stackedcolumn2d',
renderAt: 'chart-container',
width: '500',
height: '300',
dataFormat: 'json',
dataSource: {
"chart": {
"caption": "Revenue split by product category",
"subCaption": "For current year",
"xAxisname": "Quarter",
"yAxisName": "% Revenue",
"numberPrefix": "$",
"showValues": "0",
"decimals": "0",
"theme": "fint",
"valuePosition": "auto",
},
"categories": [{
"category": [{
"label": "Q1"
}, {
"label": "Q2"
}, {
"label": "Q3"
}, {
"label": "Q4"
}]
}],
"dataset": [{
"seriesname": "Food Products",
"showValues": "1",
"data": [{
"value": "11000",
"valuePosition": "above"
}, {
"value": "15000",
"valuePosition": "above"
}, {
"value": "13500",
"valuePosition": "above"
}, {
"value": "15000",
"valuePosition": "above"
}]
}, {
"seriesname": "Non-Food Products",
"data": [{
"value": "11"
}, {
"value": "14"
}, {
"value": "83"
}, {
"value": "11"
}]
}],
"annotations": {
"groups": [{
"id": "infobar",
"items": [{
"id": "label",
"type": "text",
"text": "11",
"fillcolor": "#6baa01",
"rotate": "90",
"x": "$canvasStartX + 50",
"y": "$dataset.1.set.0.y - 10"
}, {
"id": "label1",
"type": "text",
"text": "14",
"fillcolor": "#6baa01",
"rotate": "90",
"x": "$canvasStartX + 160",
"y": "$dataset.1.set.1.y - 10"
}, {
"id": "label2",
"type": "text",
"text": "83",
"fillcolor": "#6baa01",
"rotate": "90",
"x": "$canvasStartX + 260",
"y": "$dataset.1.set.2.y - 10"
}, {
"id": "label1",
"type": "text",
"text": "11",
"fillcolor": "#6baa01",
"rotate": "90",
"x": "$canvasStartX + 370",
"y": "$dataset.1.set.3.y - 10"
}]
}]
},
}
});
revenueChart.render();
});
<!-- A simple 100% stacked column chart in FusionCharts showing revenue by product category for current year Attribute: # stack100Percent - Used to make Percentage distribution instead of actual values in a stacked chart -->
<div id="chart-container">FusionCharts will render here</div>