Page 1 of 1

align legend checkbox towards left of label text

Posted: Fri Dec 07, 2018 11:39 am
by amdeshpande
I have enabled Legend check box for high chart. Is there any option to align the check box towards left side of legend text.
I have tried with below fiddle but the checkbox and legend icon are overlapping.

http://jsfiddle.net/uLhy1acv/1/

Kindly suggest your inputs on this.

Re: align legend checkbox towards left of label text

Posted: Fri Dec 07, 2018 12:56 pm
by rafalS
Hi, amdeshpande!

Unfortunately, there are no options to move checkbox. 4https://api.highcharts.com/highcharts/ ... ckboxStyle

But you can create your own custom checkbox and you will have full control of it.

Best regards

Re: align legend checkbox towards left of label text

Posted: Fri Dec 07, 2018 1:13 pm
by amdeshpande
Could you please guide me how can we add our custom check box?

Re: align legend checkbox towards left of label text

Posted: Mon Dec 10, 2018 10:56 am
by rafalS
Hi, amdeshpande!

You can wrap positionCheckboxes function and move checkboxes manually: https://jsfiddle.net/BlackLabel/ztg3wkrc/

Code: Select all

(function(H) {
  H.wrap(H.Legend.prototype, 'positionCheckboxes', function(p, scrollOffset) {
    var alignAttr = this.group.alignAttr,
      translateY,
      clipHeight = this.clipHeight || this.legendHeight;

    if (alignAttr) {
      translateY = alignAttr.translateY;
      H.each(this.allItems, function(item) {
        var checkbox = item.checkbox,
          bBox = item.legendItem.getBBox(true),
          top;

        if (checkbox) {
          top = (translateY + checkbox.y + (scrollOffset || 0) + 2);
          H.css(checkbox, {
            left: (alignAttr.translateX + item.checkboxOffset + checkbox.x - 100 - bBox.width) + 'px',
            top: top + 'px',
            display: top > translateY - 6 && top < translateY + clipHeight - 6 ? '' : 'none'
          });
        }
      });
    }
  });
})(Highcharts);

Let me know if you have any additional questions.

Best regards!

Re: align legend checkbox towards left of label text

Posted: Mon Dec 10, 2018 11:06 am
by amdeshpande
Thanks a lot rafalS. we have implemented the same thing.

Re: align legend checkbox towards left of label text

Posted: Fri Jan 19, 2024 4:43 pm
by rs2371
rafalS wrote: Mon Dec 10, 2018 10:56 am
You can wrap positionCheckboxes function and move checkboxes manually: https://jsfiddle.net/BlackLabel/ztg3wkrc/
This fiddle is now broken. Could you please give provide an updated example?

Re: align legend checkbox towards left of label text

Posted: Mon Jan 22, 2024 8:52 am
by jakub.s
Hi @rs2371,

I've updated the example and it works now with the latest version of Highcharts: https://jsfiddle.net/jb0osh7a/

Please let me know if that works for you as well.

Best regards!

Re: align legend checkbox towards left of label text

Posted: Fri Jan 26, 2024 8:59 am
by rs2371
jakub.s wrote: Mon Jan 22, 2024 8:52 am Please let me know if that works for you as well.
Quite late, but thanks, it works just fine. Thank you!