Legend items spacing/padding

[Kuroshi]

Hello, I have a chart and I want to add spacing on the legend items.  I tried to check and modify this using CSS since I am familiar with it but with no luck. Do you have other ideas guys? Can you help me?

[Barbie]

Hello @Kuroshi,

I also tried to use CSS but I believe we the only way to adjust it is by using JavaScript code. I used this and it worked.
 

<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({
legend: {
        layout: 'vertical',
        itemMarginTop: 5,
        itemMarginBottom: 5,
        padding: 5
        }
   });   
   cleaner(interv);
  }
 }, 200);
}
</script>

I hope this helps.

 

Regards,

Barbie

[Kuroshi]

@BarbieThank you so much!!! That worked. Can you also confirm if changing the position of chart title needs this complex JavaScript coding? If yes, can you provide me a reference as well?

 

 

[Barbie]

Yes, that will require JavaScript as well. I think there's an existing post regarding this. Please refer to this: 

I hope that works.

- Barbie

[futurist]

On 7/20/2021 at 2:03 PM, Barbie said:

Hello @Kuroshi,

I also tried to use CSS but I believe we the only way to adjust it is by using JavaScript code. I used this and it worked.
 

<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({
legend: {
        layout: 'vertical',
        itemMarginTop: 5,
        itemMarginBottom: 5,
        padding: 5
        }
   });   
   cleaner(interv);
  }
 }, 200);
}
</script>

I hope this helps.

 

Regards,

Barbie

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