CODEWITHSUNDEEP
angulartypescripthighcharts
NoobCoder
NoobCoder

Reputation: 503

How to show numbers in datalables donut highchart

I have a donut highchart where I am able to show name in data lables , but I need to show number in data lables . How can I achieve that ??

My angular typescript donut highchart:-

import { Component, OnInit, Input, AfterViewInit } from '@angular/core';
import * as highcharts from 'highcharts';

@Component({
  selector: 'shared-highcharts-donought',
  templateUrl: './highcharts-donought.component.html',
  styleUrls: ['./highcharts-donought.component.scss']
})
export class HighchartsDonoughtComponent implements OnInit, AfterViewInit {

  plotData: Array<object>;
  colorCodes = ['#f2bf5e', '#4bb0b8', '#536eb7'];
  @Input() chartID: string;
  @Input() set chartData(value: object) {
    this.modifyInput(value);
  }
  constructor() { }

  modifyInput(value) {
    if (Array.isArray(value)) {
      this.plotData = value.map((v: {label: string, value: string}, i) => {
        return {
          name: v.label,
          y: +v.value,
          color: this.colorCodes[i],
        };
      }, this);
      console.log('plot data looks like ', this.plotData);
    }
  }

  ngAfterViewInit() {
    this.renderChart(this.chartID);
  }

  renderChart(chartID) {
    highcharts.chart(chartID, {
      title: null,
      responsive: {
        rules: [{
            condition: {
                maxWidth: 500,
            },
            chartOptions: {
                legend: {
                    align: 'center',
                    verticalAlign: 'bottom',
                    layout: 'horizontal'

                }
            }
        }]
    },
      chart: {
        height: (9 / 13 * 100) + '%',
        type: 'pie',
        plotBackgroundColor: null,
            plotBorderWidth: null,
            plotShadow: false
      },
      credits: {
        enabled: false
      },
      plotOptions: {
        pie: {
          shadow: false,
        }
      },
      tooltip: {
        valueSuffix: 'hello',
        formatter: (val) => {
            return '<b>' + val['chart']['hoverPoint'].name + '</b><br/>: ' + val['chart']['hoverPoint'].percentage + ' %';
        }
    },
    series: [{
      type: 'pie',
      name: 'Feedback',
      data: [...this.plotData
      ],
      size: '100%',
      innerSize: '40%',
      showInLegend: false,
      dataLabels: {
          enabled: true,
          crop: false,
      }
    }],
    });
  }

  ngOnInit() {
  }

}

I want numbers (not percentage) in datalabels.

Stuck here for long. Isn't something I should do same as tooltip. I tried but not getting from where I will get value for numbers.

Upvotes: 0

Views: 56

Answers (2)

Barremian
Barremian

Reputation: 31125

You could use dataLabels.format property to set the data label format. You could also add additional data to the string such as units. For more formatting options, you could refer here.

Try the following

dataLabels: {
  enabled: true,
  crop: false,
  format: '{y}'
}

For more refined control over the format of the data labels, you could use dataLabels.formatter.

Upvotes: 1

Ignacio Lago
Ignacio Lago

Reputation: 2582

What about applying the value to the label before parsing data?

The idea is to end with:

const name = `${data.label}: ${data.value}`;

Applied to your code would be:

this.plotData = value.map((v: {label: string, value: string}, i) => {
  return {
    name: `${v.label}: ${v.value}`,
    y: +v.value,
    color: this.colorCodes[i],
  };
}, this);

Upvotes: 0

Related Questions