CODEWITHSUNDEEP
highcharts
pauldx
pauldx

Reputation: 1004

Highcharts Semi Donut Pie with Negative Percentage

I am trying to achieve combined 2 Semidonut Pie Charts series to show Current year and Last year percentage with my data . At the same time I am trying to overlay another series with data which will represent the YOY percentage increase or decrease which will appear as label outside my outer pie as "+50%" , "-60%"

Since YOY can be negative and this disturb's the Pie . I was reading that Pie is not ideal to put the negative numbers but visually in my usecase customer feels this will be great .

I tried to massage the YOY data with negative to multiply with (-1) and put into pie and I kind of able to represent the number outside pie but can't bring the "+" or "-" with "%" as valuesuffix . I have working example here but again this is with 2 data series ... my 3rd series will be "YOY%" with the datalabel display outside which is not added here as 3rd series with negative bring a weird donut .

Anybody has idea how to implement this solution to represent series 3 with YOY Outside as regular datalabels ?

https://codepen.io/pauldx/pen/BayyJaa

Highcharts.chart('container', {
  chart: {
    plotBackgroundColor: null,
    plotBorderWidth: 0,
    plotShadow: false
  },
  title: {
    text: 'Browser<br>shares<br>2017',
    align: 'center',
    verticalAlign: 'middle',
    y: 60
  },
  tooltip: {
    pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
  },
  plotOptions: {
    pie: {
      dataLabels: {
        enabled: true,
        distance: -50,
        style: {
          fontWeight: 'bold',
          color: 'white'
        }
      },
      startAngle: -90,
      endAngle: 90,
      center: ['50%', '75%'],
      size: '110%'
    }
  },
  series: [{
    type: 'pie',
    innerSize: '50%',
                dataLabels: {
                            enabled: true,
                            // inside: true,
                            distance: -70,
                        },
    data: [
      ['LYA', 58.9],
      ['LYB', 28.9],
      ['LYC', 30.29],

    ]
  },
          {
    type: 'pie',
    name: 'Browser share',
    innerSize: '70%',
            dataLabels: {
                            enabled: true,
                            // inside: true,
                            distance: -20,
                        },
    data: [
      ['CYA', 20],
      ['CYB', 18.9],
      ['CYC', 70.29],
      ]
  }]
});

Pie Chart with Negative

Upvotes: 1

Views: 450

Answers (1)

Sebastian Wędzel
Sebastian Wędzel

Reputation: 11633

As I understood - you would like to add only the dataLabels with calculated YOY value, am I right? Or do you want to add a whole series? If just a dataLabels - there is a guideline how to achieve it by adding custom dataLabels: 

events: {
  render() {
    let chart = this,
      yoyValue,
      x,
      y;

    chart.series[1].points.forEach((p, i) => {

      if (chart['label' + i]) {
        chart['label' + i].destroy();
      }

      yoyValue = Math.floor(((p.y - chart.series[0].points[i].y) / p.y) * 100);
      x = p.dataLabel.translateX - (p.shapeArgs.end == 0 ? -40 : 30);
      y = p.dataLabel.translateY;

      chart['label' + i] = chart.renderer.text(yoyValue + '%', x, y).attr({
        zIndex: 100,
      }).css({
        fontWeight: 'bold',
        color: 'white',
        textOutline: '1px contrast'
      }).add();
    })
  }
}

Demo: https://jsfiddle.net/BlackLabel/p82L4ad1/1/

API: https://api.highcharts.com/highcharts/chart.events.render

API: https://api.highcharts.com/class-reference/Highcharts.SVGRenderer#text

Upvotes: 1

Related Questions