Class: Point

Highcharts. Point

new Point()

The Point object. The point objects are generated from the series.data configuration objects or raw numbers. They can be accessed from the Series.points array. Other ways to instantiate points are through Highcharts.Series#addPoint or Highcharts.Series#setData.

Members

category :number|string

For categorized axes this property holds the category name for the point. For other axes it holds the X value.

Type:
  • number | string

colorIndex :number|undefined

The point's current color index, used in styled mode instead of color. The color index is inserted in class names used for styling.

Type:
  • number | undefined

dataGroup :Highcharts.DataGroupingInfoObject|undefined

Highcharts Stock only. If a point object is created by data grouping, it doesn't reflect actual points in the raw data. In this case, the dataGroup property holds information that points back to the raw data.

  • dataGroup.start is the index of the first raw data point in the group.

  • dataGroup.length is the amount of points in the group.

Type:
Try it

graphic :Highcharts.SVGElement|undefined

SVG graphic representing the point in the chart. In some cases it may be a hidden graphic to improve accessibility.

Typically this is a simple shape, like a rect for column charts or path for line markers, but for some complex series types like boxplot or 3D charts, the graphic may be a g element containing other shapes. The graphic is generated the first time Highcharts.Series#drawPoints runs, and updated and moved on subsequent runs.

Type:
See also:

graphics :Array.<Highcharts.SVGElement>|undefined

Array for multiple SVG graphics representing the point in the chart. Only used in cases where the point can not be represented by a single graphic.

Type:
See also:

high :number|undefined

Range series only. The high or maximum value for each data point.

Type:
  • number | undefined

<readonly> index :number

Contains the point's index in the Series.points array.

Type:
  • number

low :number|undefined

Range series only. The low or minimum value for each data point.

Type:
  • number | undefined

name :string

The name of the point. The name can be given as the first position of the point configuration array, or as a name property in the configuration:

Type:
  • string
Example
// Array config
data: [
    ['John', 1],
    ['Jane', 2]
]

// Object config
data: [{
       name: 'John',
       y: 1
}, {
    name: 'Jane',
    y: 2
}]

options :Highcharts.PointOptionsObject

The point's options as applied in the initial configuration, or extended through Point.update.

In TypeScript you have to extend PointOptionsObject via an additional interface to allow custom data options:

declare interface PointOptionsObject {
    customProperty: string;
}
Type:

percentage :number|undefined

The percentage for points in a stacked series, pies or gauges.

Type:
  • number | undefined

plotX :number|undefined

The translated X value for the point in terms of pixels. Relative to the X axis position if the series has one, otherwise relative to the plot area. Depending on the series type this value might not be defined.

In an inverted chart the x-axis is going from the bottom to the top so the plotX value is the number of pixels from the bottom of the axis.

Type:
  • number | undefined
See also:

plotY :number|undefined

The translated Y value for the point in terms of pixels. Relative to the Y axis position if the series has one, otherwise relative to the plot area. Depending on the series type this value might not be defined.

In an inverted chart the y-axis is going from right to left so the plotY value is the number of pixels from the right of the yAxis.

Type:
  • number | undefined
See also:

properties :*

In Highcharts Maps, when data is loaded from GeoJSON, the GeoJSON item's properies are copied over here.

Type:
  • *

selected :boolean

Whether the point is selected or not.

Type:
  • boolean
See also:

series :Highcharts.Series

The series object associated with the point.

Type:

<readonly> shapeArgs :Readonly.<Highcharts.SVGAttributes>|undefined

The attributes of the rendered SVG shape like in column or pie series.

Type:

total :number|undefined

The total of values in either a stack for stacked series, or a pie in a pie series.

Type:
  • number | undefined

visible :boolean

For certain series types, like pie charts, where individual points can be shown or hidden.

Type:
  • boolean
Default Value:
  • true

x :number

The x value of the point.

Type:
  • number

y :number|undefined

The y value of the point.

Type:
  • number | undefined

Methods

getClassName()

Get the CSS class names for individual points. Used internally where the returned value is set on every point.

Returns:
string .

The class names.

getLabelConfig()

Return the configuration hash needed for the data label and tooltip formatters.

Returns:
Highcharts.PointLabelObject .

Abstract object used in formatters and formats.

getZone()

In a series with zones, return the zone that the point belongs to.

Returns:
Highcharts.SeriesZonesOptionsObject .

The zone item.

haloPath(size)

Get the path definition for the halo, which is usually a shadow-like circle around the currently hovered point.

Parameters:
Name Type Description
size number

The radius of the circular halo.

Returns:
Highcharts.SVGPathArray .

The path definition.

init(series, options [, x])

Initialize the point. Called internally based on the series.data option.

Parameters:
Name Type Argument Description
series Highcharts.Series

The series object containing this point.

options Highcharts.PointOptionsType

The data in either number, array or object format.

x number <optional>

Optionally, the X value of the point.

Fires:
  • Highcharts.Point#event:afterInit
Returns:
Highcharts.Point .

The Point instance.

onMouseOut()

Runs on mouse out from the point. Called internally from mouse and touch events.

Fires:
  • Highcharts.Point#event:mouseOut

onMouseOver( [e])

Runs on mouse over the point. Called internally from mouse and touch events.

Parameters:
Name Type Argument Description
e Highcharts.PointerEventObject <optional>

The event arguments.

optionsToObject(options)

Transform number or array configs into objects. Also called for object configs. Used internally to unify the different configuration formats for points. For example, a simple number 10 in a line series will be transformed to { y: 10 }, and an array config like [1, 10] in a scatter series will be transformed to { x: 1, y: 10 }.

Parameters:
Name Type Description
options Highcharts.PointOptionsType

Series data options.

Deprecated:
  • Yes
Returns:
Highcharts.Dictionary.<*> .

Transformed point options.

pos(chartCoordinates, plotY)

Get the pixel position of the point relative to the plot area.

Parameters:
Name Type Description
chartCoordinates boolean

If true, the returned position is relative to the full chart area. If false, it is relative to the plot area determined by the axes.

plotY number | undefined

A custom plot y position to be computed. Used internally for some series types that have multiple y positions, like area range (low and high values).

Returns:
Array.<number> | undefined .

Coordinates of the point if the point exists.

Try it

remove( [redraw] [, animation])

Remove a point and optionally redraw the series and if necessary the axes

Parameters:
Name Type Argument Default Description
redraw boolean <optional>
true

Whether to redraw the chart or wait for an explicit call. When doing more operations on the chart, for example running point.remove() in a loop, it is best practice to set redraw to false and call chart.redraw() after.

animation boolean | Partial.<Highcharts.AnimationOptionsObject> <optional>
false

Whether to apply animation, and optionally animation configuration.

Try it

select( [selected] [, accumulate])

Toggle the selection status of a point.

Parameters:
Name Type Argument Default Description
selected boolean <optional>

When true, the point is selected. When false, the point is unselected. When null or undefined, the selection state is toggled.

accumulate boolean <optional>
false

When true, the selection is added to other selected points. When false, other selected points are deselected. Internally in Highcharts, when allowPointSelect is true, selected points are accumulated on Control, Shift or Cmd clicking the point.

See also:
Fires:
  • Highcharts.Point#event:select
  • Highcharts.Point#event:unselect
Try it

setNestedProperty(object, value, key)

Set a value in an object, on the property defined by key. The key supports nested properties using dot notation. The function modifies the input object and does not make a copy.

Parameters:
Name Type Description
object T

The object to set the value on.

value *

The value to set.

key string

Key to the property to set.

Returns:
T .

The modified object.

setState( [state] [, move])

Set the point's state.

Parameters:
Name Type Argument Description
state Highcharts.PointStateValue | "" <optional>

The new state, can be one of 'hover', 'select', 'inactive', or '' (an empty string), 'normal' or undefined to set to normal state.

move boolean <optional>

State for animation.

Fires:
  • Highcharts.Point#event:afterSetState

sonify( [onEnd])

Play a sonification of a point.

Parameters:
Name Type Argument Description
onEnd Highcharts.SonificationChartEventCallback <optional>

Callback to call after play completed

Requires:
  • module:modules/sonification

tooltipFormatter(pointFormat)

Extendable method for formatting each point's tooltip line.

Parameters:
Name Type Description
pointFormat string

The point format.

Returns:
string .

A string to be concatenated in to the common tooltip text.

update(options [, redraw] [, animation])

Update point with new options (typically x/y data) and optionally redraw the series.

Parameters:
Name Type Argument Default Description
options Highcharts.PointOptionsType

The point options. Point options are handled as described under the series.type.data item for each series type. For example for a line series, if options is a single number, the point will be given that number as the marin y value. If it is an array, it will be interpreted as x and y values respectively. If it is an object, advanced options are applied.

redraw boolean <optional>
true

Whether to redraw the chart after the point is updated. If doing more operations on the chart, it is best practice to set redraw to false and call chart.redraw() after.

animation boolean | Partial.<Highcharts.AnimationOptionsObject> <optional>
true

Whether to apply animation, and optionally animation configuration.

Fires:
  • Highcharts.Point#event:update
Try it