CODEWITHSUNDEEP
javascriptjqueryhighcharts
Lalit Bhudiya
Lalit Bhudiya

Reputation: 4418

In Highchart legend, Want to bring checkbox at start

I want to bring Checkbox before item name which are normally after the item name. Refer below image for more description.

enter image description here

Upvotes: 4

Views: 5781

Answers (2)

Paweł Fus
Paweł Fus

Reputation: 45079

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/

Upvotes: 7

SteveP
SteveP

Reputation: 19103

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 },

http://api.highcharts.com/highcharts#legend.rtl

Upvotes: 1

Related Questions