CODEWITHSUNDEEP
javascriptcsshighcharts
Maurizio In denmark
Maurizio In denmark

Reputation: 4284

highcharts legend items align to the left when width is set

I have a highchart with a legend. I made the legend have a fixed width of 380px, and I would like to have the legend items always aligned to the right inside this legend box. They align to the left by default instead.

Those are the properties of the legend:

... legend: {
        align: 'right', //this align the legend box , not the items
        verticalAlign: 'top',
        borderWidth: 1,
        width: 380,
        floating: true,
        x: -35,
        symbolRadius: 0,
        symbolWidth: 10,
        symbolHeight: 10,
        enabled: true,
        itemStyle: { //I even tried this but with no lick
            textAlign: 'right',
        }
    }, ...

And this the legend box is how it looks like:

enter image description here

I would like those 2 items to be on the right of the box.

Here is a jsfiddle of the graph not doing what I want:

http://jsfiddle.net/MaurizioPiccini/d746v/9/

What I have tried:

1- Putting this in my CSS only changes the alignment of the text inside the item, but it does not align the items to the right of the box.

.highcharts-legend-item span {
     text-align:right!important;
}

2- adding this as a property on the legend align the legend box , not the items

 align: 'right',

3- adding this as a property on the legend just does not work either:

itemStyle: { //I even tried this but with no lick
    textAlign: 'right',
}

Upvotes: 3

Views: 4661

Answers (2)

Paweł Fus
Paweł Fus

Reputation: 45079

In general it's not supported. However, you can try to achieve that by manually translating legend group to the right side. You will need to update that position on each chart resize, or whenever legend is redrawn.

Here is sample for it: http://jsfiddle.net/d746v/10/

                this.legend.allItems[0].legendGroup.attr({ // 0 - first series, 1 - second series etc.
                    translateX: 320
                });

So for each item you will need to calculate proper position.

Upvotes: 2

CvR
CvR

Reputation: 48

You could try: text-align: right; instead of "align";
Or you could try to specify the element in CSS further like: 

div .example p {

}

I hope this solves your problem. Good luck!

http://www.w3schools.com/cssref/pr_text_text-align.asp

Upvotes: 0

Related Questions