Highchart Legend Alignment

0
votes

enter image description here

I have created variable pie chart using highchart. In legend section I need to show one name and one value. so I put value in span tag. Now I can't align the value. The external styles are not working. Once we inspect that span tag, automatically generate dx="0". When we edit that value in console it's working. But when we give it to internal style or external style, it's not working.

enter image description here

I need alternate style attribute of "dx". The above image dx value is automatically generated. 

 data: [
    {
    name: 'Name Score  '+'<span class="score-percentage" >99% </span>',
    y: 100,
    z: 99
    }
]

This is what I did in code. Using span class "score-percentage" to fill color black.

1
javascriptjqueryuser-interfacehighcharts
Hi Anish Sharma, How you want to align the values in legend? I prepared similar example, but I do not know, what result you want to acheieve: jsfiddle.net/BlackLabel/13hxzfk7 – ppotaczek
Hi.Thanku. i need, the values on the right side in same line. – Anish Sharma

1 Answers

1
votes

To have more flexibility, you can use Highcharts.SVGRenderer to add the values, for example in this way:

chart: {
    type: 'variablepie',
    events: {
        render: function() {
            var legend = this.legend,
                legendItems = this.legend.allItems;

            legendItems.forEach(function(item, i) {
                if (!legend.customLabels) {
                    this.renderer.text(
                        legendValues[i],
                        110,
                        item.itemHeight
                    ).attr({

                    }).add(item.legendGroup)
                }

                item.legendItem.css({
                    color: item.color
                })

            }, this);

            legend.customLabels = true;
        }
    }
},
legend: {
    align: 'left',
    squareSymbol: false,
    padding: 0,
    symbolWidth: 0,
    layout: 'vertical'
},

Live demo: http://jsfiddle.net/BlackLabel/nsdv659x/

API: https://api.highcharts.com/highcharts/chart.events.render