CODEWITHSUNDEEP
javascriptcsschartshighcharts
Jay Pastagia
Jay Pastagia

Reputation: 39

Highchart: Center text in plot option in column chart

    chart: {
        type: 'column'
    },
    xAxis: {
        type: 'category'
    },
    plotOptions: {
        series: {
            dataLabels: {
                enabled: true,
               formatter: function () {
                return '<b >'+Math.round(this.point.y)+'%</b>'+'<br>
                        <b >(N='+ this.point.count + ')</b>';
                }
            }
        }
    }

I want to display 5%,1%,0% in the center of the column/center above (N=600)

Here is the image

Here is jsfiddle

Upvotes: 1

Views: 243

Answers (2)

Henrik 9000
Henrik 9000

Reputation: 139

Based on Rockie Yang's code, I found that you need to add the exporting property allowHTML and make it true. It's false by default and allowHTML allows you to preserve HTML structure in the exported chart.

JSFiddle: http://jsfiddle.net/henrikskar/oos3bqov/

exporting: {
        enabled: true,
        allowHTML: true
    }

Upvotes: 2

Rockie Yang
Rockie Yang

Reputation: 4925

Add useHTML and center the element.

Ref Highcharts Labels and String Formatting

dataLabels: {
    enabled: true,
    useHTML: true,
    formatter: function () {
    return '<center><b>'+Math.round(this.point.y)+'%</b></center>'
      +'<br><center><b>(N='+ this.point.count + ')</b><center>';
}

if you wanna exporting, then add following allowHTML in exporting.

exporting: {
    allowHTML: true
}

Ref Highcharts exporting API

Upvotes: 3

Related Questions