Markers
Markers are visual indicators that represent data points in the Angular Chart. You can customize markers in terms of shape, size, color, rotation, and other visual properties to match your design requirements.
The following example demonstrates how to configure and customize markers.
Supported Series Types
Markers are supported in Area, Line, Polar Area, Polar Line, Polar Scatter, Radar Area, Radar Line, Range Area, Scatter, and Scatter Line series.
Marker Properties
Control the appearance and behavior of markers through the following properties:
type—Defines the shape of the marker. Available shapes includecircle,square,triangle,cross,rect, androundedRect.size—Sets the marker size in pixels. The default value is6.background—Specifies the background color of the marker.border—Configures the border properties including color, width, and dash type.rotation—Defines the rotation angle of the marker in degrees.visible—Controls whether the markers are displayed. By default, markers are visible.fromandto—Specify marker configurations for the start and end points inRangeAreaandVerticalRangeAreaseries.visual—Specifies a function for creating custom marker shapes using the Drawing API.
Rendering Custom Marker Shapes
You can render markers with custom shapes by using the visual function. This function receives a MarkersVisualArgs parameter and returns a group of Drawing primitives that represent the marker.
The visual callback provides complete control over the marker appearance, enabling you to create unique shapes, apply gradients, combine multiple shapes, or implement any custom visualization logic.
When you use custom visuals, you might need to disable the series item highlight to prevent a default shape from rendering on top of the marker when you hover over the series. To disable the highlight, set the
visibleproperty of theSeriesItemComponent highlightproperty tofalse.
The following example demonstrates how to render markers with custom shapes using the visual callback.
The example below illustrates how to create gain and loss markers for a financial chart.
Support and Learning Resources
- Chart Markers Homepage
- Getting Started with the Kendo UI for Angular Chart
- API Reference of the Chart
- SeriesMarkersComponent API
- Axes
- Chart Area
- Crosshairs
- Error Bars
- Labels
- Legend
- Notes
- Panes
- Plot Area
- Plot Bands
- Selection
- Series
- Title
- Tooltip
- Getting Started with Kendo UI for Angular (Online Guide)
- Getting Started with Kendo UI for Angular (Video Tutorial)
- Video Courses
- Chart Forum
- Before You Start: All Things Angular (Telerik Blog Post)
- Knowledge Base