point

An object defining configuration options for points in line-, scatter- and area-like series.

Type: Object

To specify point options for all line-, scatter- and area-like series at once, use the properties of the point object defined within the commonSeriesSettings configuration object.

If you have several series of a single type, you can set point options to the values specific to this series type using the corresponding object (area, line, etc.) within the commonSeriesSettings configuration object. The values that are set within series-type-specific configuration objects override their corresponding common values.

If you need to set a point option for an individual series, use the point object within the series object of the series array. The values that are set individually override their corresponding common values.

Show Example:
jQuery

In this example, the appearance of the series points is changed.


                                    

                                    

border

Specifies border options for points in a line-, scatter- or area- series.

Type: Object

Use this object to make series points' border visible/invisible and set up such border options as color and width.

Show Example:
jQuery

In this example, the border of the series points is colored in paleturquoise and has a 2-pixel width.


                                    

                                    

color

Specifies the points color.

Type: String
Default Value: undefined

This option supports the following colors.

  • Hexadecimal colors
  • RGB colors
  • RGBA colors (not supported in Internet Explorer 8)
  • Predefined/cross-browser color names
  • Predefined SVG colors (not supported in Internet Explorer 8)
Show Example:
jQuery

In this example, the series points are colored in aqua.


                                    

                                    

hoverMode

Specifies what series points to highlight when a point is hovered over.

Type: String
Default Value: 'onlyPoint'
Accepted Values: 'onlyPoint' | 'allSeriesPoints' | 'allArgumentPoints' | 'none'

The following values are available:

  • onlyPoint
    Changes the appearance of the hovered point only.
  • allSeriesPoints
    Changes the appearance of the hovered point together with all series points.
  • allArgumentPoints
    Changes the appearance of the points that correspond to the argument of the hovered point (in all series at once). For instance, the bars corresponding to the argument of the hovered point are highlighted.
  • none
    The appearance of the hovered point is not changed.

To set custom options for the 'hover' style, which is applied when a point is hovered over, use the hoverStyle configuration object defining it for an individual series (series | point | hoverStyle), for all series of a particular type (commonSeriesSettings | area/line/... | point | hoverStyle), or all series in the chart (see commonSeriesSettings | point | hoverStyle).

View Demo

Show Example:
jQuery

Change the value of the point's hoverMode option using the drop-down list below. Then, hover over one of the points to see the effect.


                                    

                                    

hoverStyle

An object defining configuration options for a hovered point.

Type: Object

To set a custom 'hover' style for points in all series at once, use the point | hoverStyle object within the commonSeriesSettings configuration object.

If you have several series of one type, you can set point hover style options to the values specific to this series type using the corresponding object (area, line or another) within the commonSeriesSettings configuration object. The values that are set within series-type-specific configuration objects override the corresponding common values.

In case you have to set a point hover style option for an individual series, use the hoverStyle object within the series | point object of the series array. The values that are set individually override corresponding common values.

Show Example:
jQuery

In this example, the style of a hovered point is changed using the hoverStyle option.


                                    

                                    

image

An object specifying the parameters of an image that is used as a point marker.

Type: String|Object
Default Value: undefined

In a common case, chart points are represented by default point markers. However, you can use a custom image as a point marker. To do this, specify the options of the image object. Assign a URL leading to your image to the url option. If the size of your image does not correspond to your needs, specify the width and height options.

NOTE: If you do not need to resize your image, you can assign an image URL directly to the image field.

Refer to our Visualization Gallery to see the demo.

selectionMode

Specifies what series points to highlight when a point is selected.

Type: String
Default Value: 'onlyPoint'
Accepted Values: 'onlyPoint' | 'allSeriesPoints' | 'allArgumentPoints' | 'none'

The dxChart widget comes with the API that allows you to select a point in code. Use the selectionMode property to specify what series points to select when a point is selected:

  • onlyPoint
    Changes the appearance of the selected point only.
  • allSeriesPoints
    Changes the appearance of the selected point together with all series points.
  • allArgumentPoints
    Changes the appearance of the points that correspond to the argument of the selected point (in all series at once). For instance, the bars corresponding to the argument of the selected point are highlighted.
  • none
    The appearance of the selected point is not changed.

To set custom options for the 'selected' style, which is applied when a point is selected, use the selectionStyle configuration object defining it for an individual series (series | point | selectionStyle), for all series of a particular type (commonSeriesSettings | area/line/... | point | selectionStyle), or all series in the chart (see commonSeriesSettings | point | selectionStyle).

Show Example:
jQuery

Change the value of the point's selectionMode option using the drop-down list below. Then, click one of the points to see the effect.


                                    

                                    

selectionStyle

An object defining configuration options for a selected point.

Type: Object

The dxChart widget comes with API members that allow you to select a point in code. To set a custom 'selected' style for points in all series at once, use the point | selectionStyle object within the commonSeriesSettings configuration object.

If you have several series of one type, you can set point selection style options to the values specific to the series type using the corresponding object (area, line or another) within the commonSeriesSettings configuration object. The values that are set within series-type-specific configuration objects override the corresponding common values.

In case you have to set a point selection style option for an individual series, use the selectionStyle object within the series | point object of the series array. The values that are set individually override corresponding common values.

Show Example:
jQuery

In this example, the style of a selected point is changed using the selectionStyle option.


                                    

                                    

size

Specifies the point diameter in pixels for those series that represent data points as symbols (not as bars or candle sticks for instance).

Type: Number
Default Value: 12

Show Example:
jQuery

In this example, the size option for all points is set to 5.


                                    

                                    

symbol

Specfies a symbol for presenting points of the line-, scatter- or area-like series.

Type: String
Default Value: 'circle'
Accepted Values: 'circle' | 'square' | 'polygon' | 'triangle' | 'cross'

Show Example:
jQuery

Use the drop-down list under the chart to change the symbol representing a point.


                                    

                                    

visible

Specifies point visibility.

Type: Boolean
Default Value: false

Show Example:
jQuery

Use the check box below to change the visibility of the series points.