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

align legend checkbox towards left of label text

Fri Dec 07, 2018 11:39 am

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: 693
Joined: Thu Jun 14, 2018 11:40 am

Re: align legend checkbox towards left of label text

Fri Dec 07, 2018 12:56 pm

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 Developer

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

Re: align legend checkbox towards left of label text

Fri Dec 07, 2018 1:13 pm

Could you please guide me how can we add our custom check box?

rafalS
Posts: 693
Joined: Thu Jun 14, 2018 11:40 am

Re: align legend checkbox towards left of label text

Mon Dec 10, 2018 10:56 am

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 Developer

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

Re: align legend checkbox towards left of label text

Mon Dec 10, 2018 11:06 am

Thanks a lot rafalS. we have implemented the same thing.

Return to “Highcharts Usage”