Highcharts TypeScript, y-axis label

Question

Refer to the discussion of Highcharts text labels for the y axis to set the y axis label.

I used https://github.com/borisyankov/DefinitelyTyped/blob/master/highcharts/highcharts.d.ts in my TypeScript definition, but could not find a way to define the y axis formatter.

Has anyone ever tried before?

- Update -

My javascript source code

var yearChartOptions = { yAxis: { plotLines: [{ label: { formatter: function () { return '$' + Highcharts.numberFormat(this.value/1000, 0) +'k '; } }, }] }, }; // Create the chart var yearChart = new Highcharts.Chart(yearChartOptions); 

In the code, I have this.value value, which is each line (I used a histogram). In TypeScript (I haven't changed to remove an array yet).

  var yearChartOptions: HighchartsOptions = {}; yearChartOptions.chart = {}; yearChartOptions.yAxis = []; yearChartOptions.yAxis[0] = {}; yearChartOptions.yAxis[0].plotLines = {}; yearChartOptions.yAxis[0].plotLines.label = {}; yearChartOptions.yAxis[0].plotLines.label.style.formatter(() => "$" + Highcharts.numberFormat(this.value / 1000, 0) + "k "); // Create the chart var yearChart = new Highcharts.Chart(yearChartOptions); 

Output signal

 /* Compile Error. See error list for details D:/MyProject/Scripts/test.ts(36,56): The property 'formatter' does not exist on value of type 'HighchartsCSSObject' D:/MyProject/Scripts/test.ts(36,107): The property 'value' does not exist on value of type 'Dashboard' */ 

And it will not compile.

Answer 1

Update - The definitely typed Highcharts definition now has my fix, so you can download the latest version and hopefully it solves your problem.

The type definition for Highcharts assumes that you need to pass the amd array to yAxis. This compiles in TypeScript.

 var chart = new Highcharts.Chart({ yAxis: [{ labels: { formatter: function (): string { return 'My Label'; } } }] }); 

However, I'm not sure if this is consistent with the documentation that suggests passing yAxis parameters as an object , and not as an array of many of these objects. It also makes sense from the point of view that you have one yAxis.

To achieve what, in my opinion, is a valid version (i.e. not arrays):

 /// <reference path="highchart.d.ts" /> var yearChartOptions: HighchartsOptions = { yAxis: { plotLines: { label: { formatter: function (): string { return '$' + Highcharts.numberFormat(this.value / 1000, 0) + 'k '; } }, } } }; // Create the chart var yearChart = new Highcharts.Chart(yearChartOptions); 

You can customize the highchart.d.ts file here ...

 interface HighchartsOptions { chart?: HighchartsChartOptions; // others... yAxis?: HighchartsAxisOptions; // <-- remove the [] from this line } 

I sent a upload request to a specific type to fix this.

A fully working example based on your code: