Can I Add Space Between Title and Axis

[deemuss]

I have a chart and I need some more space between its axis title and the drawing itself. However, I cannot see any option to customise that.

[Hastur]

Hello @deemuss

It is possible using additional JS code. 
You need to insert the following code into the Header of the Chart result section:

<script type="text/javascript">
document.addEventListener('DataPageReady', chartUpdateHandler)

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

 let interv = setInterval(() => {
  if (!!Highcharts.charts[0]) {
   console.log(Highcharts.charts[0]);
   Highcharts.charts[0].update({
    xAxis: {
     title: {
      margin: 100 //change this value to change the space
     }
    },
    yAxis: {
     title: {
      margin: 100 //change this value to change the space
     }
    }
   });   
   cleaner(interv);
  }
 }, 200);
}
</script>

Note that you need to disable the HTML editor of the Header in the Advanced section.

[futurist]

On 2/24/2020 at 1:28 AM, Hastur said:

Hello @deemuss

It is possible using additional JS code. 
You need to insert the following code into the Header of the Chart result section:

<script type="text/javascript">
document.addEventListener('DataPageReady', chartUpdateHandler)

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

 let interv = setInterval(() => {
  if (!!Highcharts.charts[0]) {
   console.log(Highcharts.charts[0]);
   Highcharts.charts[0].update({
    xAxis: {
     title: {
      margin: 100 //change this value to change the space
     }
    },
    yAxis: {
     title: {
      margin: 100 //change this value to change the space
     }
    }
   });   
   cleaner(interv);
  }
 }, 200);
}
</script>

Note that you need to disable the HTML editor of the Header in the Advanced section.

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