nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

Stacked bar chart - Displaying total on top

frames88

I want to display totals on the stacked bar chart. Since there is no direct option to set this, I am trying to achieve this by scripting. I have computed the totals, but stuck in identifying the top stack to the label. How to identify the top stack for each bar? Here is my code on onRender event: [color=#000000;][font="consolas;"]totalsArray = [/color][/font][color=#7f0055;][font="consolas;"]new[/color][/font][color=#000000;][font="consolas;"] Array();[/color][/font] [color=#7f0055;][font="consolas;"]function[/color][/font][color=#000000;][font="consolas;"] afterDataSetFilled(series, dataSet, icsc) {[/color][/font][color=#000000;][font="consolas;"] // Computed Totals for each bar from dataSet and stored in totalsArray.[/color][/font][color=#000000;][font="consolas;"]}[/color][/font] [color=#7f0055;][font="consolas;"]function[/color][/font][color=#000000;][font="consolas;"] beforeDrawDataPointLabel(dph, label, icsc) {[/color][/font][color=#000000;][font="consolas;"] // How to identify the top stack so that I can set the label here?[/color][/font][color=#7f0055;][font="consolas;"] if[/color][/font][color=#000000;][font="consolas;"] ( ####### top stack ###### ){[/color][/font][color=#000000;][font="consolas;"] label.getCaption().setValue(totalsArray[dph.getIndex()] );[/color][/font][color=#000000;][font="consolas;"] label.setVisible([/color][/font][color=#7f0055;][font="consolas;"]true[/color][/font][color=#000000;][font="consolas;"]);[/color][/font][color=#000000;][font="consolas;"] } [/color][/font][color=#7f0055;][font="consolas;"]else[/color][/font][color=#000000;][font="consolas;"]{[/color][/font][color=#000000;][font="consolas;"] label.getCaption().setValue([/color][/font][color=#2a00ff;][font="consolas;"]""[/color][/font][color=#000000;][font="consolas;"]);[/color][/font][color=#000000;][font="consolas;"] }[/color][/font][color=#000000;][font="consolas;"]}[/color][/font]

Find more posts tagged with

Comments

GLO_FR

Hi, I know 2 solutions. First one is very simple and doen't need scripting. First, you need to create a "TOTAL" category in your dataset.The trick is to use a second serie (line) which only show the TOTAL category. Unfortunately, for this example, you have to hide the legend or to find a way to remove some entries (I didn't find a solution for this yet

) For the second one, the starting point is to create a fake "TOTAL" category in your dataset and an array with the real total value (more or less what you have already done).You have to choose a name so the category will be placed on the top of your chart (in my case ZZZ-TOTAL)Afterward, with some scripting you will be able to update everything. sorry, it's hard to explain that why I join 2 examples

SChu

I have two solutions for this issue, to simply add a total over stacked bars as originally requested, this client script can be used:
 
 
<blockquote class="ipsBlockquote">
 
beforeGeneration: function(options) 
{ 
 totalArray = []; //Define Array 
}, 
beforeDrawDataPoint: function(point, pointOptions, chart, seriesIndex, pointIndex) 
{ 
 if(totalArray[point.x]){ //If array value already exists 
 var tmp = totalArray[point.x]; //Get array value 
 tmp += point.y; //Add next series value to total 
 totalArray[point.x] = tmp; //Put new value back in array 
 } 
 else{ //If array value doesnt already exist 
 totalArray[point.x] = point.y; //Create new array value 
 } 
}, 
beforeRendering: function(options, chart) 
{ 
 options.yAxis[0] ={ //Get yAxis 0 
 stackLabels: { //Define stackLabels 
 enabled: true, //Enable stackLabels 
 style: { //Define style 
 fontWeight: 'Bold', 
 color: '#000', //Color to black 
 }, 
 formatter: function() { //Label formatter 
 var places = 1; 
 if(!totalArray[this.x]){ //Check whether the value is a null 
 return null; 
 } 
 else { 
 var decCheck = totalArray[this.x].toFixed(places); //Loop through totalArray and display values 
 if(totalArray[this.x].toFixed(places) == 0) { //avoid labeling if there is no value 
 return null; 
 } 
 else { 
 if (decCheck.toString().slice(-1) == 0){ //Check for trailing zero 
 return parseInt(decCheck) + "M"; //drop trailing zero and append units 
 } 
 else { 
 return decCheck + "M"; //return value if trailing value is not zeroand append units 
 } 
 } 
 } 
 } 
 } 
 } 
},
</blockquote>
 
Second, on GLO_FR's point about hiding a Total series, below is a beforeGeneration script for the chart to achieve a total line when a "Total" value exists in your Y-Axis grouping.
 
Note: I used two Y-axes for this so that I could toggle visibility on the bars and compare those slices to the total trend, for a single axis the script would need adjustment.
 
<blockquote class="ipsBlockquote">function beforeGeneration( chart, icsc ) 
{ 
xAxis = chart.getAxes().get(0); 
yAxis1 = xAxis.getAssociatedAxes().get(0); 
sd1 = yAxis1.getSeriesDefinitions().get(0); 
yAxis2 = xAxis.getAssociatedAxes().get(1); 
sd2 = yAxis2.getSeriesDefinitions().get(0); 
for(i=0;i<sd1.getSeries().size();i++){ 
if(sd1.getSeries().get(i).getSeriesIdentifier() == "Series 1"){ 
sd1.getSeries().get(i).setVisible(true); 
} 
else if(sd1.getSeries().get(i).getSeriesIdentifier() == "Total"){ 
sd1.getSeries().get(i).setVisible(false); 
} 
else{ 
sd1.getSeries().get(i).setVisible(true); 
} 
} 
for(i=0;i<sd2.getSeries().size();i++){ 
if(sd2.getSeries().get(i).getSeriesIdentifier() == "Series 1"){ 
sd2.getSeries().get(i).setVisible(true); 
} 
else if(sd2.getSeries().get(i).getSeriesIdentifier() == "Total"){ 
sd2.getSeries().get(i).setVisible(true); 
} 
else{ 
sd2.getSeries().get(i).setVisible(false); 
} 
} 
}</blockquote>