0

I am able to display the legend and legend title in angular2-highcharts. I am planning to display the total count below the legend title ( here below city), but couldn't able to find out how. Also I am not sure why % is displayed along with the value in the legend values.

My label formatter is:

  labelFormatter: function () {
      return '<div class="legend-label-md row" style=" border-bottom:1px solid black; margin-bottom: 5px"><span class="col-md-10">' + this.name +
             '</span><span class="col-md-2" >' + this.value +
              '%</span></div> ';
       }

https://plnkr.co/edit/yzXLz7AIDoWa1Pzxxl4k?p=preview

teni
  • 430
  • 4
  • 18
indra257
  • 66
  • 3
  • 24
  • 50
  • 1
    % is displayed because of the %-character here: ``'% ';`` – teni Mar 30 '17 at 15:48
  • Thanks. I overlooked it. Any idea about getting the total value and displaying it. – indra257 Mar 30 '17 at 15:51
  • I haven't worked with HS for a long time, and I'm not familiar with that way of initiating it. If you somehow assign it to a variable you get access to all it's objects. Like this: http://jsfiddle.net/trn_/ck8xq14w/ – teni Mar 30 '17 at 16:40

1 Answers1

0

Each pie series point has total for the series, so you could update legend on load event of a chart to include the total from the series.

Demo: https://plnkr.co/edit/6JW1KmYE1Lr4pAIWCJTm?p=preview

template as:

template: `
    <chart  [options]="options" (load)="onLoad($event)">
    </chart>
`

In class AppComponent:

    onLoad (e) {
                var chart = e.context,
                    total = chart.series[0].points[0].total;
                chart.update({
                    legend: {
                        title: {
                            text: 'City<br/><span style="font-size: 9px; color: #666; font-weight: normal">(Total: ' + total + ')</span>' 
                        }
                    }
                })
              };
Kacper Madej
  • 7,846
  • 22
  • 36
  • Appreciate it. Also I am trying to disable the shadow effect when I hover on a slice. I tried series: {shadow: false }, also plotShadow: false but both didn't work. – indra257 Mar 31 '17 at 15:02
  • @indra257 It's halo and not a shadow - here's a demo with it disabled: https://plnkr.co/edit/37POwXIuP8oBnLtcFL1l?p=preview (size to 0 in [this option](http://api.highcharts.com/highcharts/plotOptions.pie.states.hover.halo.size)) – Kacper Madej Mar 31 '17 at 15:23
  • @indra257 You could use tooltip.positioner to set position for the tooltip - https://plnkr.co/edit/mW5dot3WsfVZFMHBgYaG?p=preview Rest to do is to set style for the tooltip - you could use API for this: http://api.highcharts.com/highcharts/tooltip – Kacper Madej Apr 03 '17 at 10:35
  • I am having a small issue with Label icons. Can you please check http://stackoverflow.com/questions/43452938/highcharts-pie-chart-labels-not-displayed-properly – indra257 Apr 17 '17 at 15:05
  • 1
    Can you please check this http://stackoverflow.com/questions/43474750/highchart-legend-customization – indra257 Apr 18 '17 at 14:19