CODEWITHSUNDEEP
javascriptcsshighcharts
user8815449
user8815449

Reputation:

Highcharts bar format datalabels to percent and add text

I have highcharts bar.

How I can format my datalabel to percent and add text datalabels (how i can reposition this text? It's need me for create vertical version of this bar) ?

In the end, it should turn out like this in a horizontal or vertical solution.

enter image description here

enter image description here

Highcharts.chart('container', {
    chart: {
        type: 'bar'
    },
    title: {
        text: 'Activity'
    },
    xAxis: {
        categories: ['Activity']
    },
    yAxis: {
        min: 0,
        title: {
            text: ''
        }
    },
    legend: {
        reversed: true
    },
    plotOptions: {
        series: {
        	borderWidth: 0,
            stacking: 'normal',
            pointWidth: 3,
            dataLabels: {                
                enabled: true,
                y: 2,
                verticalAlign: 'top',
                align: 'left',
                color: '#000000',
             style: {
                    textOutline: false 
                }
            }
        }
    },
    series: [{
        name: 'One',
        data: [10],
        color: '#f45b69'
    }, {
        name: 'Two',
        data: [20],
        color: '#44bba4'
        
    }, {
        name: 'Three',
        data: [30],
        color: '#ff9f1c'
    }]
});
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>

<div id="container" style="min-width: 310px; max-width: 800px; height: 400px; margin: 0 auto"></div>

Upvotes: 0

Views: 5290

Answers (1)

ewolden
ewolden

Reputation: 5803

To just show the number with a percentage sign behind as well as the series name you can set the dataLabels format like this:

plotOptions: {
  series: {
    format: '{y} % <br/> {series.name}',
    ...
  }
}

If you want to change how it looks or have more customize-ability you can use formatter instead of format.

Working example: https://jsfiddle.net/ewolden/y5ygdx2a/1/

API on dataLabels.format: https://api.highcharts.com/highcharts/plotOptions.series.dataLabels.format

Upvotes: 2

Related Questions