# Class: Point

## Highcharts. Point

#### new Point(series, options [, x])

  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.

  ##### 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

### 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

#### color :Highcharts.ColorType|undefined

  The point's current color.

  ##### Type:

  - Highcharts.ColorType | undefined

#### 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:

  - Highcharts.DataGroupingInfoObject | undefined

  ##### Try it

  - Click to inspect raw data points.

#### 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:

  - Highcharts.SVGElement | undefined
  See also:
    - Highcharts.Point#graphics

#### 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:

  - Array.<Highcharts.SVGElement> | undefined
  See also:
    - Highcharts.Point#graphic

#### 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

#### key :number|string

  The point's name if it is defined, or its category in case of a category, otherwise the x value. Convenient for tooltip and data label formatting.

  ##### Type:

  - number | string

#### 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:

  - Highcharts.PointOptionsObject

#### 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:
    - Highcharts.Point#pos

#### 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:
    - Highcharts.Point#pos

#### points :Array.<Highcharts.Point>|undefined

  Array of all hovered points when using shared tooltips.

  ##### Type:

  - Array.<Highcharts.Point> | undefined

#### 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:
    - Highcharts.Point#select
    - Highcharts.Chart#getSelectedPoints

#### series :Highcharts.Series

  The series object associated with the point.

  ##### Type:

  - Highcharts.Series

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

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

  ##### Type:

  - Readonly.<Highcharts.SVGAttributes> | undefined

#### sliced :boolean|undefined

  Pie series only. Whether to display a slice offset from the center.

  ##### Type:

  - boolean | undefined

#### <readonly> tooltipPos :Readonly.<Array.<number>>|undefined

  Defines the tooltip's position for a data point in a chart. It is an array of numbers representing the coordinates for the tooltip's placement, allowing for precise control over its location.

  ##### Type:

  - Readonly.<Array.<number>> | undefined

#### 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

#### doDrilldown()

  Perform drilldown on a point instance. The drilldown property must be set on the point options.

  To drill down multiple points in the same category, use `Axis.drilldownCategory` instead.

  ##### Requires:

  - module:modules/drilldown

  ##### Try it

  - Programmatic drilldown.

#### 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.

#### 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.

#### 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.

  ##### 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

  - Get point's position in pixels.

#### 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

  - Remove point and confirm.
  - Remove pie slice.
  - Remove selected points in Highmaps.

#### 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:
    - Highcharts.Chart#getSelectedPoints

  ##### Fires:

  - Highcharts.Point#event:select
  - Highcharts.Point#event:unselect

  ##### Try it

  - Select a point from a button.
  - Lasso selection.
  - Rectangle selection.
  - Select a point in Highmaps.

#### 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

#### setVisible( [vis] [, redraw])

  Toggle the visibility of a pie slice or other data point. Note that this method is available only for some series, like pie, treemap and sunburst.

  ##### Parameters:

  Name | Type | Argument | Description
  --- | --- | --- | ---
  `vis` | boolean | <optional> | True to show the pie slice or other data point, false to hide. If undefined, the visibility is toggled.
  `redraw` | boolean | <optional> | Whether to redraw the chart after the point is altered. If doing more operations on the chart, it is a good idea to set redraw to false and call chart.redraw() after.

#### 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

  - Update column value.
  - Update pie slice.
  - Update map area value in Highmaps.