CODEWITHSUNDEEP
angularhighcharts
S Khan
S Khan

Reputation: 49

Highcharts - Property value does not exist on type Point Angular 12

While extending Highcharts in Angular I am getting the error Property value does not exist on type Point Angular 12 in under legend parameters. Except that all other things are work, please let me know where can I place this value to be able to get the result in legend.

In the below code under labelFormatter when I am checking this.options, it is returning {"name":"Account value","value":500,"y":500} but this.value is giving error.

 chartOptions: Highcharts.Options = {
  colors: ['#276ab4', '#44b749'],
  exporting: {
  enabled: false
  },
  title: {
  text: 'Account overview',
  align: 'left',
  style: {
  fontFamily: 'Roboto,sans-serif',
  }
  },
  legend: {
  enabled: true,
  layout: 'vertical',
  align: 'center',
  verticalAlign: 'top',
  borderWidth: 0,
  margin: 0,
  padding: 0,
  labelFormatter: function () {
  // return '<b>' + this.name + ' : ' + '</b> ₹' + JSON.stringify(this.options) + '';
  return '<b>' + this.name + ' : ' + this.value + '';
  },
  itemMarginTop: 10,
  itemMarginBottom: 10,
  itemStyle: {
  fontFamily: 'Roboto,sans-serif',
  fontSize: '12px'
  },
  width: "100%"
  },
  tooltip: {
  headerFormat: '',
  pointFormat: '<b>{point.name} : </b>₹{point.value}',
  backgroundColor: '#eee',
  borderColor: '#dbdbdb',
  borderRadius: 3,
  borderWidth: 1,
  shadow: false,
  style: {
  color: '#000',
  padding: '10px',
  fontFamily: 'Roboto,sans-serif',
  fontSize: '12px'
  }
  },
  plotOptions: {
  pie: {
  allowPointSelect: true,
  cursor: 'pointer',
  dataLabels: {
  enabled: false
  },
  showInLegend: true
  }
  },
  series: [{
  data: [
  {
  name: 'Account value',
  value: 500,
  y: 500
  },
  {
  name: 'Cash balance',
  value: 200,
  y: 200
  }
  ],
  type: 'pie',
  size: '65%',
  innerSize: '65%',
  showInLegend:true
  }],
  credits: {
  enabled: false
  }
  }

Upvotes: 0

Views: 2316

Answers (1)

Karol Kołodziej
Karol Kołodziej

Reputation: 672

In cases when TS definitions are missing you have basically two options:

  1. Cast to as any - I wouldn't recommend that.

  2. Extend the existing interface with the missing property - recommended

interface CustomPoint extends Highcharts.Point {
  value: number;
}

Demo: https://stackblitz.com/edit/highcharts-angular-basic-line-lxbwzx
Docs: https://github.com/highcharts/highcharts-angular#help-and-faq

Upvotes: 2

Related Questions