Stacking Bar Chart: show the total value

[CoopperBackpack]

Hello all, 

I am creating this topic to share my findings. 

The question is how to display the total value above the bar as shown on the screenshot:

[CoopperBackpack]

To achieve this, you may add the following code to the DataPage Footer section. 

Please do not forget to disable the HTML editor on the Advanced tab before pasting.

<script> 
 
document.addEventListener('DataPageReady', chartUpdateHandler); 
 
function chartUpdateHandler(event) {  
 const cleaner = function (interv) { 
  clearInterval(interv); 
 } 
 
 const interv = setInterval(() => { 
  if(!Highcharts) return; 
 
  const chart = Highcharts.charts.find(chart => chart !== undefined); 
  chart.update({ 
             
 yAxis: { 
            stackLabels: { 
                enabled: true, 
                formatter: function() { 
                    return Highcharts.numberFormat(this.total, 1, ',', '.'); 
                } 
            } 

        }, 
  }); 
 
  cleaner(interv); 
 
 }, 200); 
} 
</script> 

Hope this helps.

 

P. S. Please note that this code should work correctly in case you have 1 Chart DataPage deployed on the web-page.

[Abdulhafeez]

The script is working fine on initial load, but when I change any of the search fields it is no longer working.

[CoopperBackpack]

Hello @Abdulhafeez,

I updated the code once again. Please test it. 

It looks like the issue can be related to the slow Internet. As I can see, sometimes the request for the new data for the chart works out later than the Chart is rendered. 
I am checking for the options to fix this and will update this thread as soon as I find a solution.

Thanks. 

[Queso]

This is genius! Now I no longer need to look at the Y axis. Thank you!

Just wanted to add the following thread because it is related to this and the solution is displaying total value: 

 

[futurist]

On 6/30/2022 at 6:08 AM, CoopperBackpack said:

To achieve this, you may add the following code to the DataPage Footer section. 

Please do not forget to disable the HTML editor on the Advanced tab before pasting.

<script> 
 
document.addEventListener('DataPageReady', chartUpdateHandler); 
 
function chartUpdateHandler(event) {  
 const cleaner = function (interv) { 
  clearInterval(interv); 
 } 
 
 const interv = setInterval(() => { 
  if(!Highcharts) return; 
 
  const chart = Highcharts.charts.find(chart => chart !== undefined); 
  chart.update({ 
             
 yAxis: { 
            stackLabels: { 
                enabled: true, 
                formatter: function() { 
                    return Highcharts.numberFormat(this.total, 1, ',', '.'); 
                } 
            } 

        }, 
  }); 
 
  cleaner(interv); 
 
 }, 200); 
} 
</script> 

Hope this helps.

 

P. S. Please note that this code should work correctly in case you have 1 Chart DataPage deployed on the web-page.

Hi, sharing in here a script that I found that allows you to check if an element exists (followed by your code if that element in fact exists) instead of using a timer (setInterval):

 

function waitForElm(selector) {
    return new Promise(resolve => {
        if (document.querySelector(selector)) {
            return resolve(document.querySelector(selector));
        }

        const observer = new MutationObserver(mutations => {
            if (document.querySelector(selector)) {
                resolve(document.querySelector(selector));
                observer.disconnect();
            }
        });

        observer.observe(document.body, {
            childList: true,
            subtree: true
        });
    });
}

 

 

 

 

To use it:

waitForElm('.some-class').then((elm) => {
    console.log('Element is ready');
    console.log(elm.textContent);
});