Percentage in Y-Axis Values

[eunha]

I'm trying to add  a percentage symbol in the Y-axis values of my Column Chart DataPage using the Formatting feature. They are displaying as percentage, however, all the values are being changed. I just want to add a percentage symbol and retain the values as is. Can someone help with this?

[GoodBoy]

This is possible using the formatter function of Highcharts. You may paste this on your DataPage Footer.

<script type = "text/javascript" >
var timer = setInterval(function() {
//Find if chart exists using rect element every x milliseconds
if (document.getElementsByTagName('rect') != null) {
//Update Chart
UpdateChart();
}
}, 500);
function UpdateChart() {
try {
Highcharts.charts[0].update({
yAxis: {
  labels: {
    formatter: function() {
       return this.value+"%";
    }
}
}
});
//Stop checking
clearInterval(timer);
} catch (err) {
//log errors
}
};
</script>

This will be the result:

[GoodBoy]

I just modified this Caspio HowTo article and added some code snippet I found here: https://stackoverflow.com/questions/17246187/displaying-percentage-in-y-axis-of-highcharts-column-chart 

Hope this helps! 

[futurist]

On 4/28/2022 at 6:14 PM, GoodBoy said:

This is possible using the formatter function of Highcharts. You may paste this on your DataPage Footer.

<script type = "text/javascript" >
var timer = setInterval(function() {
//Find if chart exists using rect element every x milliseconds
if (document.getElementsByTagName('rect') != null) {
//Update Chart
UpdateChart();
}
}, 500);
function UpdateChart() {
try {
Highcharts.charts[0].update({
yAxis: {
  labels: {
    formatter: function() {
       return this.value+"%";
    }
}
}
});
//Stop checking
clearInterval(timer);
} catch (err) {
//log errors
}
};
</script>

This will be the result:

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