Docs

Docs

Data Point Markers

How to configure the markers that visualize data points.

Line charts and other charts that display data points, such as scatter and spline charts, visualize the points with markers. The markers can be configured with the Marker property objects available from the plot options of the relevant chart types, as well as at the level of each data point, in the DataSeriesItem. You need to create the marker and apply it with the setMarker() method in the plot options or the data series item.

For example, to set the marker for an individual data point:

Source code
Java
DataSeriesItem point = new DataSeriesItem(x,y);
Marker marker = new Marker();
// ... Make any settings ...
point.setMarker(marker);
series.add(point);

Marker Shape Properties

A marker has a stroke and a fill color, which are set using a CSS selector .highcharts-markers .highcharts-point.

Source code
Java
// Set radius and symbol
marker.setRadius(10);
marker.setSymbol(MarkerSymbolEnum.DIAMOND);

point.setMarker(marker);
series.add(point);

Marker size is determined by the radius parameter, which is given in pixels.

Source code
Java
marker.setRadius((z+1)*5);

Marker Symbols

Markers are visualized either with a shape or an image symbol. You can choose the shape from many built-in shapes defined in the MarkerSymbolEnum: enum ( CIRCLE, SQUARE, DIAMOND, TRIANGLE, or TRIANGLE_DOWN). These shapes are drawn with a line and fill which you can set as described above.

Source code
Java
marker.setSymbol(MarkerSymbolEnum.DIAMOND);

You can also use any image accessible by a URL by using a MarkerSymbolUrl symbol. If the image is deployed with your application, such as in the frontend folder, you can determine its URL as follows:

Source code
Java
String url = "frontend/img/smiley.png";
marker.setSymbol(new MarkerSymbolUrl(url));

You can use width and height to resize the marker. The radius property isn’t applicable to image symbols.