title: How can we customise the series data object property names "name" & "y" as part of highcharts-angular?
body: <p>Can anyone please help me on if there is anyway to customize the series data object property names as part of highcharts, actual proprty names are <strong>name</strong> &amp; <strong>y</strong>.</p>
  
  <p><a href="https://i.stack.imgur.com/1N3HQ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/1N3HQ.png" alt="enter image description here"></a></p>
  
  <p>And when I am trying to change these property names as <strong>vendor</strong> &amp; <strong>rating</strong> then piechart is not loading in browser</p>
  
  <p><a href="https://i.stack.imgur.com/7ez1m.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/7ez1m.png" alt="enter image description here"></a> </p>
  
  <p>I gone through many threads but not able to find solution as per my need.So, please help if there is anyway to update these property names with any code changes as I am getting such data format from rest api service as shown above with different values.Thanks in advance.</p>
  
  <p><strong>app.component.ts</strong></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import {Component} from '@angular/core';
  import * as Highcharts from 'highcharts';
  
  @Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
  })
  
  
  export class AppComponent {
  
    constructor(){
    };
  
    setStarFlag(id:number){
      console.log(id);
    }
  
    Highcharts = Highcharts;
    chartOptions = {
      chart: {
        type: 'pie',
        plotBackgroundColor: null,
        plotBorderWidth: null,
        plotShadow: false
      },
      title: {
        text: 'Vendor Ratings'
      },
      tooltip: {
        pointFormat: '{series.name}:&lt;b&gt;{point.percentage:.1f}%&lt;/b&gt;'
      },
      plotOptions: {
        pie: {
          allowPointSelect: true,
          cursor: 'pointer',
          dataLabels: {
            enabled: true,
            format: '&lt;b&gt;{point.name}&lt;/b&gt;: {point.percentage:.1f} %',
            style: {
              //color: (Highcharts.theme &amp;&amp; Highcharts.theme.contrastTextColor) || 'black'
            }
          },
          showInLegend: true
        },
        series: {
          cursor: 'pointer',
          point: {
            events: {
              click: function(e){
                const p = e.point;
                this.setStarFlag(p.name);
              }.bind(this)
            }
          }
        }
      },
      credits: {
        enabled: false
      },
      series: [{
        name:'Rating',
        data: [
          {
            name: 'Chrome',
            y: 61.41
          },
          {
            name: 'Internet Explorer',
            y: 11.84
          },
          {
            name: 'Firefox',
            y: 10.85
          },
          {
            name: 'Edge',
            y: 4.67
          },
          {
            name: 'Safari',
            y: 4.18
          },
          {
            name: 'Sogou Explorer',
            y: 1.64
          },
          {
            name: 'Opera',
            y: 1.6
          },
          {
            name: 'QQ',
            y: 1.2
          },
          {
            name: 'Other',
            y: 2.61
          }
        ]
      }]
    };
  }</code></pre>
  </div>
  </div>
  </p>
  
  <p>And see in app.component.ts file <code>data</code> object set hard coded data but in my case that object data will come from rest api service in this format</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>[
    {
      vendor: 'Chrome',
      rating: 61.41
    },
    {
      vendor: 'Internet Explorer',
      rating: 11.84
    },
    {
      vendor: 'Firefox',
      rating: 10.85
    },
    {
      vendor: 'Edge',
      rating: 4.67
    },
    {
      vendor: 'Safari',
      rating: 4.18
    },
    {
      vendor: 'Sogou Explorer',
      rating: 1.64
    },
    {
      vendor: 'Opera',
      rating: 1.6
    },
    {
      vendor: 'QQ',
      rating: 1.2
    },
    {
      vendor: 'Other',
      rating: 2.61
    }
  ]</code></pre>
  </div>
  </div>
  </p>
  
  <p>So, here I just want assign that rest api response to that highcharts data object but in that case piechart not getting display. And as I don't have control to update those json object property names as that response coming from api service.Now, how I can say to HighCharts use <strong>vendor</strong> &amp; <strong>rating</strong> instaed of <strong>name</strong> &amp; <strong>y</strong> to display piechart?   </p>
  
  <p><strong>app.component.html</strong></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;highcharts-chart
    [Highcharts]="Highcharts"
    [options]="chartOptions"
    style="width: 100%; height: 400px; display: block;"
  &gt;&lt;/highcharts-chart&gt;</code></pre>
  </div>
  </div>
  </p>