Search code examples
htmlcsshighchartspolygontspan

highchart center align tspan inside text tag

I want to align the tspan center inside the text tag of highchart.

I have created one jsfiddle : here

Code

Highcharts.chart('container', {
    chart: {
        type: 'pyramid'
    },
    title: {
        text: 'Sales pyramid',
        x: -50
    },
    plotOptions: {
        series: {
            dataLabels: {
                enabled: true,
                format: '<b>{point.name}</b><br/>{point.y:,.0f}',
                color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black',
                softConnector: true
            },
            center: ['40%', '50%'],
            width: '80%'
        }
    },
    legend: {
        enabled: false
    },
    series: [{
        name: 'Unique users',
        data: [
            ['Website visits',      15654],
            ['Downloads',            4064],
            ['Requested price list', 1987],
            ['Invoice sent',          976],
            ['Finalized',             846]
        ]
    }]
});

as you can see

As you can see "Finalized" and "846" are left aligned, is there a way to align "846" centrally to "Finalized" text?

Solution

  • imgUpdate your dataLabels

    plotOptions: {
    series: {
        dataLabels: {
            useHTML:true,
            enabled: true,
            format: '<b>{point.name}</b><br/><div align="center">{point.y:,.0f}</div>',
            color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black',
            softConnector: true
        },
        center: ['40%', '50%'],
        width: '80%'
    }
},

    fiddle demo