Legend width

[CClabaugh]

Is it possible to control a chart's legend width? 

[CoopperBackpack]

Hello @CClabaugh,

Generally it is possible with JavaScript code. 

Since Caspio uses the Highcharts library to render Chart DataPages, you may refer to the Highcharts documentation to lean more about Chart`s customization https://api.highcharts.com/highcharts/ 

I used the code from this Forum post and modified it to change the legend width. It works on my side.

<script>
document.addEventListener('DataPageReady', chartUpdateHandler)

function chartUpdateHandler(event) {

var cleaner = function(interv) {
  clearInterval(interv);
}

let interv = setInterval(() => {

  var chart =  Highcharts.charts[0];
  if(!chart) return;
  chart.update({
          legend: {
              width: 500      
      }
});

   cleaner(interv);

    }, 200);
}
 </script>

Please paste this code to the Footer section on the  "Chart Wizard - Configure Chart Options" screen of your DataPage. 

Do not forget to disable the HTML editor on the Advanced tab before pasting the code.

I put the legend width as 500 px, please use the value that you need.

Hope this helps. 

[futurist]

On 1/9/2021 at 12:15 AM, CoopperBackpack said:

Hello @CClabaugh,

Generally it is possible with JavaScript code. 

Since Caspio uses the Highcharts library to render Chart DataPages, you may refer to the Highcharts documentation to lean more about Chart`s customization https://api.highcharts.com/highcharts/ 

I used the code from this Forum post and modified it to change the legend width. It works on my side.

<script>
document.addEventListener('DataPageReady', chartUpdateHandler)

function chartUpdateHandler(event) {

var cleaner = function(interv) {
  clearInterval(interv);
}

let interv = setInterval(() => {

  var chart =  Highcharts.charts[0];
  if(!chart) return;
  chart.update({
          legend: {
              width: 500      
      }
});

   cleaner(interv);

    }, 200);
}
 </script>

Please paste this code to the Footer section on the  "Chart Wizard - Configure Chart Options" screen of your DataPage. 

Do not forget to disable the HTML editor on the Advanced tab before pasting the code.

I put the legend width as 500 px, please use the value that you need.

Hope this helps. 

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