I want to bring Checkbox before item name which are normally after the item name. Refer below image for more description.
By default it's not supported, but you can use simple workaround for this, see: http://jsfiddle.net/Le4Vc/4/
$('#container').highcharts({
chart: {
events: {
load: function() {
var chart = this;
$.each(chart.legend.allItems, function(i, item){
var $check = $(item.checkbox),
left = parseFloat($check.css('left')),
label = item.legendItem,
static = 30;
$check.css({
left: (left - label.bBox.width - static) + 'px'
});
});
}
}
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
plotOptions: {
series: {
marker: {
enabled: false
},
allowPointSelect: true,
showCheckbox: true
}
},
legend: {
symbolPadding: 20,
symbolWidth: 0
},
series: [{
name: 's 1',
data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
},{
name: 'another name',
data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4].sort(function(a,b) { return a - b; })
}]
});
Edit:
Another solution, more universal is to wrap positionCheckboxes
function. For example:
(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.bBox,
top;
if (checkbox) {
top = (translateY + checkbox.y + (scrollOffset || 0) + 3);
H.css(checkbox, {
left: (alignAttr.translateX + item.checkboxOffset + checkbox.x - 60 - bBox.width) + 'px',
top: top + 'px',
display: top > translateY - 6 && top < translateY + clipHeight - 6 ? '' : 'none'
});
}
});
}
});
})(Highcharts);
And demo: http://jsfiddle.net/Le4Vc/85/
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With