Move Charts Title to the Left

[astroboy]

I tried to move the title of a chart from middle to left using Styles and CSS but no luck. Is there a workaround to do this?

[princezuko]

Hi Astroboy,

I have a piece of Javascript code with me that might do the trick for you. You may paste this code on the footer inside your DataPage, but make sure to disable the HTML editor on the advanced tab. Here's the code:

<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({
    title: {
        text: 'Insert Text Here',
        align: 'left',
        x: 70
    }
   });   
   cleaner(interv);
  }
 }, 200);
}
</script>

 

Note: You have to insert the title that you want to use directly on this code. To do that, simply replace the text *Insert Text Here* with the title that you want to set for your chart.

 

[futurist]

On 4/27/2020 at 11:18 PM, princezuko said:

Hi Astroboy,

I have a piece of Javascript code with me that might do the trick for you. You may paste this code on the footer inside your DataPage, but make sure to disable the HTML editor on the advanced tab. Here's the code:

<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({
    title: {
        text: 'Insert Text Here',
        align: 'left',
        x: 70
    }
   });   
   cleaner(interv);
  }
 }, 200);
}
</script>

 

Note: You have to insert the title that you want to use directly on this code. To do that, simply replace the text *Insert Text Here* with the title that you want to set for your chart.

 

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