How to change the width of chart columns?

[vikovs]

Hi everyone,

I would like to increase the width of columns in a Caspio Column chart. Is there any solution for this?

Many thanks in advance for your help!!!

 

[Vitalikssssss]

Hi vikovs,

To access and modify the width of columns in Caspio-generated HighCharts chart, you may use the following JS:

<script src="https://code.jquery.com/jquery-3.2.1.js"></script>
<script>
$(document).ready(
function ()
{
var chart = Highcharts.charts[0];
chart.update(
{
plotOptions: {
        series: {
            pointWidth: 20 // change the column width here
        }
    },
}
);
}
);
</script>

You can place this snippet of code into the Header of Chart datapage.

Hope this helps.

[vikovs]

Hi Vitalikssssss,

Brilliant! It works!

Thank you sooo much!!!

 

 

 

[sandy159]

I tried using this code but it didn't work for me. I can see that $(document).ready function was deprecated in one of their releases.

Please see modified code that helped me to change the width of columns in a chart:

<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({
    plotOptions: {
        series: {
            pointWidth: 20 // change the column width here
        }
    },        
});
        //Stop checking
        clearInterval(timer);
    } catch (err) {
        //log errors
    }
}; 
</script>

I hope this helps someone.

[autonumber]

Hello! I found this article if you want to customize your chart. Just add some attributes to increase the width of the chart.  https://howto.caspio.com/tech-tips-and-articles/advanced-customizations/customize-caspio-chart-datapages/

[futurist]

On 7/19/2022 at 7:59 AM, sandy159 said:

I tried using this code but it didn't work for me. I can see that $(document).ready function was deprecated in one of their releases.

Please see modified code that helped me to change the width of columns in a chart:

<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({
    plotOptions: {
        series: {
            pointWidth: 20 // change the column width here
        }
    },        
});
        //Stop checking
        clearInterval(timer);
    } catch (err) {
        //log errors
    }
}; 
</script>

I hope this helps someone.

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