How to create column chart with percentage Highcharts Angular 2

Question

Hi have the following chart configuration:

private InputData: any = {
            chart: { type: 'column' },
            title : { text : 'some title' },
            xAxis: {
                categories: ['Monday', 'Tuesday']
            },
            yAxis: {
                allowDecimals: false,
                title: { text: ''}
            },
            series: [
                {
                    name: 'Students',
                    data: [100,80],
                    color: '#3366cc'
                }
            ],
            plotOptions: {
                column: {
                    dataLabels: {
                    enabled: true,
                    formatter: function(){
                        // return Highcharts.numberFormat(this.y,0);
                        }
                    }
                }
            }
        };

It works fine. But is there anyway I can make the chart in percentage format? Do I need to use any events or is there any configuration available?

http://stackoverflow.com/questions/16837209/highcharts-percentage-of-total-for-simple-bar-chart — blackdaemon, Mar 30 '17 at 08:29
try that configuration in your code. or upload plunker demo(with you data). where i can try — Deep 3015, Mar 30 '17 at 08:32
ya I tried with this line in formatter. `return Highcharts.numberFormat(100 * this.y / this.y.total,0) + "%";` But the thing is I cant import `Highcharts`. How to do that in Angular 2 — blackdaemon, Mar 30 '17 at 08:33

score 2 · Answer 1 · answered Mar 30 '17 at 08:56

2

try something like this

Plunker demo

plotOptions: {
            column: {
                dataLabels: {
                enabled: true,
                formatter: function(){
                  var seriesData=this.series.data;
                  var total=0;
                  for(var i=0;i<seriesData.length;i++){
                    total+=seriesData[i].y
                  }
                  return (100 * this.y / total).toFixed(2) + "%";
                 }
              }
            }
        },

answered Mar 30 '17 at 08:56

Deep 3015

9,929
5
30
54

Great! Thanks Deep. But I need to make the Y axis only until 100, since its a percentage. Anyway? Sorry am new to Highcharts – blackdaemon Mar 30 '17 at 09:00
Because as you can see the Axis and the values in the column has no link – blackdaemon Mar 30 '17 at 09:01
http://plnkr.co/edit/Bjwu6ZbqVuQ00wjOo6ec?p=preview is somewhat not dynamic but working – Deep 3015 Mar 30 '17 at 09:33
yes Deep. But in my case I have two series. Thats the tricky part – blackdaemon Mar 31 '17 at 03:32
For single one works perfectly as you explained but not for multiple series – blackdaemon Mar 31 '17 at 03:32

How to create column chart with percentage Highcharts Angular 2

1 Answers1