> Markdown version of [Data Point Markers](https://vaadin.com/docs/next/components/charts/charttypes/markers). Section index: [llms.txt](https://vaadin.com/docs/next/components/llms.txt)

# <a id="charts.charttypes.markers"></a>Data Point Markers

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:

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

## <a id="charts.charttypes.markers.markerproperties"></a>Marker Shape Properties

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

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

```java
marker.setRadius((z+1)*5);
```

## <a id="charts.charttypes.markers.markersymbols"></a>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.

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

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