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
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!