score:0
Fortunately, this documentation comment has a list of all the members that are guaranteed to exist on this
. (If there were no documentation, you could always console.log(this)
from your function and look at what's there.) In essence, you'd have to write a TypeScript interface that declares all of the members with the proper types:
interface TooltipFormatterContext {
percentage: number; // Is this correct?
// ...
}
and then use this interface as your this
type. If you want to properly represent shared vs. non-shared tooltips, you'd need two different interfaces similar to the current TooltipOptions
that fix shared
to false
and true
respectively and have the corresponding this
types for the formatter, and then you'd define TooltipOptions
as a union type of the two interfaces.
score:0
The problem with working out the type of this with these function calls is that the third-party api can bind whatever object it wants to it.
tooltip.formatter.bind(someHighChartsObject);
tooltip.formatter(); // this refers to someHighChartsObject
tooltip.formatter.bind(someOtherHighChartsObject);
tooltip.formatter(); // this refers to someOtherHighChartsObject
Inside of the function, it's a bit difficult to specify the type of this as it could be anything including one not defined by their documentation. In your specific case, it should be of type Highcharts.PointObject
or Highcharts.ChartObject
which you could technically specify with the following:
const that: Highcharts.PointObject = this;
that.series.name;
Issues:
- It's not possible to redefine the type of
this
so you're cloning the object just to get stronger typing. - If there's no documentation, or they use an undocumented type, you have to inspect
this
and write your own interface.
TL;DR
It's not possible to simply add in stronger typing to the this
object in an function that is called by third-party code.
score:3
Highcharts exports the types you need. Just do the following:
import Highcharts from 'highcharts`;
...
tooltip: {
formatter(this: Highcharts.TooltipFormatterContextObject) {
// your code
}
}
Source: stackoverflow.com
Related Query
- In TypeScript, how do I work out the proper type for 'this'?
- How to make json object for this type in c#?
- How to format PHP into the proper string for JSON in pie chart using highchart
- How do I hide the code for the chart data in highcharts?
- Highcharts - How to set custom colors for the series
- Highcharts, Can you change the chart type for drilldowns?
- How can I extend the lines of this Highchart series to the edges of my chart area?
- How to completely disable the mouse/finger interaction for highcharts
- How to set the x value for High Charts error bar
- How to use add series and update methods in the high chart wrapper for angular?
- How to customize the crosshair Line for Highcharts
- Getting the complete XML source out of an XML DOM object
- Highmaps: what is the code for a county?
- How do I put Icons in the y Axis for a Dynamic Highcharts chart?
- c# WPF Webbrowser with Highchart, Javascript from external source not working "An error has occurred in the script on this page"
- How to show Legends for all the series data in stacked column chart Highcharts?
- How do i add mouse wheel code in Angular2 highcharts in typescript
- how to change the point format for drill down in pie charts?
- how to display 2 same highcharts without duplicate the code
- How can I set the alignment for individual axis labels in highcharts?
- Does this qualify for the Highstock NON-COMMERCIAL LICENSE?
- how can i add in highcharts a different dashStyle just for a part of the graph
- How can I display the outcome of the for loop in highcharts
- How can I limit the length of a HighCharts PlotLine on the Y-Axis for a BoxPlot?
- Why does this Highcharts graph only show tooltip for the first and last nodes?
- How to show open, close, high and low in tooltip when the chart type is 'line' in highstocks?
- How to hide only the columns of this group when hovering over a group column in highcharts?
- How to display the total of the series values for a donut chart in Highcharts?
- white border/line color set on hover for the bubbles in the bubble chart not being reset on mouse out from bubble
- How do I use dates from a LinkedHashMap for the x-axis on a Highcharts line graph (using Thymeleaf)?
More Query from same tag
- Highchart: How to change y-axis title text inside angularjs controller?
- How to change area graph color above certain value in Highcharts
- Handdrawn Lines for Highcharts
- Recreating a highcharts donut chart in highcharter
- R highcharts multiple stacked bar chart
- SpagoBI: create a dynamic chart using SpagoBI
- Highcharts rendering high amount of data points showing message "A webpage is slowing down your browser. What would you like to do?" in Firefox
- min, max threshold in highcharts
- Highcharts - Multiple Subtitle (2)
- Stacked Bar And Scatter Alignment
- Highcharts Schedule for my Unit
- Highcharts - How to separate the functionality of the navigator from the graph
- giving a javascript number fixed width after decimal while remaining a number
- Stack line on area / stack area on line in highcharts?
- How to format Ruby array to be used as data in Highcharts
- Highcharts's pie chart minSize option not working
- HighCharts columns with striated columns
- Use return data from dynamic highcharts chart in Shiny
- Highcharts yAxis is not scaling to fill available height
- Returning MySQL table values from PHP script to Javascript function - Live Graphing
- Highcharts disabling marker not working
- vmware-clarity Type 'ElementRef' is not generic
- Rails and Highcharts
- Highcharts issue when dealing with 3D pie and large labels
- Is there a way to fill different colors up to the desired point in Highcharts gauge graph?
- Highcharts -- how to change line width programmatically and prevent resetting line width?
- Overlapping Y Axis in a Multi y axis Highchart
- Highcharts: Using an array as a data series - ordering
- Time series horizontal bar chart for running queries visualization
- Highchart does not render on webpage, Javascript