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/
It's hard to tell without seing your chart code, but you may have some joy with the rtl legend option.
legend: { rtl: true },
or
legend: { rtl: false },
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.