How can I display the total value on the top of stacked bars using fusion charts? I'm not able to use custom options. I want to show the total value of all stacks of a bar on the top of each bar. This graph is done using fusion charts library, and is it possible to do the same graph using D3 JS?
Codepen link: https://codepen.io/sampath-PerOxide/pen/jdWJMK
Here is my code:
const dataSource = {
"chart": {
"yaxisname": "y axis name",
"flatscrollbars": "0",
"scrollheight": "12",
"numvisibleplot": "8",
"plottooltext": "<b>$dataValue</b> people died because of $seriesName in $label",
"theme": "ocean"
},
"categories": [
{
"category": [
{
"label": "1994"
},
{
"label": "1995"
},
{
"label": "1996"
},
{
"label": "1997"
},
{
"label": "1998"
},
{
"label": "1999"
},
{
"label": "2000"
},
{
"label": "2001"
},
{
"label": "2002"
},
{
"label": "2003"
},
{
"label": "2004"
},
{
"label": "2005"
},
{
"label": "2006"
},
{
"label": "2007"
},
{
"label": "2008"
},
{
"label": "2009"
},
{
"label": "2010"
},
{
"label": "2011"
},
{
"label": "2012"
},
{
"label": "2013"
},
{
"label": "2014"
},
{
"label": "2015"
},
{
"label": "2016"
},
{
"label": "2017"
}
]
}
],
"dataset": [
{
"seriesname": "Hymenoptera",
"data": [
{
"value": "15622"
},
{
"value": "10612"
},
{
"value": "15820"
},
{
"value": "26723"
},
{
"value": "35415"
},
{
"value": "25555"
},
{
"value": "81803"
},
{
"value": "47950"
},
{
"value": "42396"
},
{
"value": "19435"
},
{
"value": "9780"
},
{
"value": "23243"
},
{
"value": "28619"
},
{
"value": "8477"
},
{
"value": "3503"
},
{
"value": "14278"
},
{
"value": "30522"
},
{
"value": "61518"
},
{
"value": "24819"
},
{
"value": "16437"
},
{
"value": "21171"
},
{
"value": "1690"
},
{
"value": "2418"
},
{
"value": "11253"
}
]
},
{
"seriesname": "test name",
"data": [
{
"value": "15622"
},
{
"value": "10612"
},
{
"value": "15820"
},
{
"value": "26723"
},
{
"value": "35415"
},
{
"value": "25555"
},
{
"value": "81803"
},
{
"value": "47950"
},
{
"value": "42396"
},
{
"value": "19435"
},
{
"value": "9780"
},
{
"value": "23243"
},
{
"value": "28619"
},
{
"value": "8477"
},
{
"value": "3503"
},
{
"value": "14278"
},
{
"value": "30522"
},
{
"value": "61518"
},
{
"value": "24819"
},
{
"value": "16437"
},
{
"value": "21171"
},
{
"value": "1690"
},
{
"value": "2418"
},
{
"value": "11253"
}
]
},
{
"seriesname": "Diptera",
"data": [
{
"value": "3622"
},
{
"value": "2612"
},
{
"value": "5820"
},
{
"value": "6723"
},
{
"value": "5415"
},
{
"value": "5555"
},
{
"value": "1803"
},
{
"value": "7950"
},
{
"value": "2396"
},
{
"value": "9435"
},
{
"value": "2780"
},
{
"value": "3243"
},
{
"value": "8619"
},
{
"value": "1477"
},
{
"value": "1503"
},
{
"value": "4278"
},
{
"value": "9522"
},
{
"value": "2518"
},
{
"value": "4819"
},
{
"value": "6437"
},
{
"value": "6171"
},
{
"value": "2690"
},
{
"value": "1418"
},
{
"value": "1253"
}
]
}
]
};
FusionCharts.ready(function() {
var myChart = new FusionCharts({
type: "scrollstackedcolumn2d",
renderAt: "chart-container",
width: "100%",
height: "100%",
dataFormat: "json",
dataSource
}).render();
});
You can show the summation of the stack plots using showSum attribute as 1 at the chart object level, here is a demo:
"chart": {
"yaxisname": "y axis name",
"flatscrollbars": "0",
"scrollheight": "12",
"numvisibleplot": "8",
"plottooltext": "<b>$dataValue</b> people died because of $seriesName in $label",
"theme": "ocean",
//use this attribute to show the summation
"showSum": "1",
"valuefontcolor": "#000000"
}