amdeshpande
Posts: 26
Joined: Thu Oct 04, 2018 4:57 am

align legend checkbox towards left of label text

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.
rafalS
Posts: 2665
Joined: Thu Jun 14, 2018 11:40 am

Re: align legend checkbox towards left of label text

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
Rafal Sebestjanski,
Highcharts Team Lead
amdeshpande
Posts: 26
Joined: Thu Oct 04, 2018 4:57 am

Re: align legend checkbox towards left of label text

Could you please guide me how can we add our custom check box?
rafalS
Posts: 2665
Joined: Thu Jun 14, 2018 11:40 am

Re: align legend checkbox towards left of label text

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!
Rafal Sebestjanski,
Highcharts Team Lead
amdeshpande
Posts: 26
Joined: Thu Oct 04, 2018 4:57 am

Re: align legend checkbox towards left of label text

Thanks a lot rafalS. we have implemented the same thing.
rs2371
Posts: 4
Joined: Mon Nov 11, 2013 11:10 am

Re: align legend checkbox towards left of label text

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?
jakub.s
Posts: 1164
Joined: Fri Dec 16, 2022 11:45 am

Re: align legend checkbox towards left of label text

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!
Jakub
Highcharts Developer
rs2371
Posts: 4
Joined: Mon Nov 11, 2013 11:10 am

Re: align legend checkbox towards left of label text

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!

Return to “Highcharts Usage”