Total value on top of stacked bars in fusion charts

Question

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();
    });

Answer 1

You can opt to show the sum of all stacked data plots in a column above that column. To show the sum of all stacked data plots, set the showSum attribute to 1.

Refer to the code given below:

{
  "chart": {
    "showSum": "1"
  },
}

To know more about it refer click here

JsFiddle

FusionCharts.ready(function() {
  var revenueChart = new FusionCharts({
    type: 'stackedcolumn2d',
    renderAt: 'chart-container',
    width: '700',
    height: '400',
    dataFormat: 'json',
    dataSource: {
      "chart": {
        "theme": "fusion",
        "caption": "Revenue split by product category",
        "subCaption": "For current year",
        "xAxisname": "Quarter",
        "yAxisName": "Revenues (In USD)",
        //Showing the Cumulative Sum of stacked data
        "showSum": "1",
        "numberPrefix": "$",
        "theme": "fusion"
      },
      "categories": [{
        "category": [{
            "label": "Q1"
          },
          {
            "label": "Q2"
          },
          {
            "label": "Q3"
          },
          {
            "label": "Q4"
          }
        ]
      }],
      "dataset": [{
          "seriesname": "Food Products",
          "data": [{
              "value": "11000"
            },
            {
              "value": "15000"
            },
            {
              "value": "13500"
            },
            {
              "value": "15000"
            }
          ]
        },
        {
          "seriesname": "Non-Food Products",
          "data": [{
              "value": "11400"
            },
            {
              "value": "14800"
            },
            {
              "value": "8300"
            },
            {
              "value": "11800"
            }
          ]
        }
      ]
    }
  }).render();
});

Answer 2

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"
}

https://codepen.io/anon/pen/xMEGJY?editors=1010