![\"\"](\"https:\/\/mindfusion.dev\/blog\/wp-content\/uploads\/2025\/05\/chart_markers.png\")
<\/a><\/figure>\n\n\n\n\n\n\n\nMarker lines can be drawn by overriding Renderer2D.Draw method:<\/p>\n\n\n\n
class MarkerLineRenderer : Renderer2D\n{\n public MarkerLineRenderer(SimpleSeries series) :\n base(new ObservableCollection<Series> { series })\n {\n }\n\n protected override void Draw(RenderContext context)\n {\n var series = Series[0];\n using (var pen = new Pen(Color.Red, 2)\n { DashStyle = System.Drawing.Drawing2D.DashStyle.Dot })\n {\n for (int i = 0; i < series.Size; i++)\n {\n double x = series.GetValue(i, 0);\n var point = GetPixel(\n x, context.XAxis,\n 0, context.YAxis, context.Component);\n context.Graphics.DrawLine(\n pen, point.X, 0,\n point.X, (float)context.Component.ActualHeight);\n }\n }\n }\n}<\/code><\/pre>\n\n\n\nWe will provide marker coordinates by populating a SimpleSeries instance:<\/p>\n\n\n\n
var markerCoords = new SimpleSeries(\n new double[] { 5, 20, 23 }, null);<\/code><\/pre>\n\n\n\nand add the new graphics on top of area chart ones:<\/p>\n\n\n\n
areaChart.Plot.SeriesRenderers.Add(\n new MarkerLineRenderer(markerCoords));<\/code><\/pre>\n\n\n\nBy changing DrawLines calls above with DrawImage, you could render icons on top of the chart instead. Alternatively, draw custom geometries by calling DrawPath method.<\/p>\n\n\n\n
Similar approach could be used to draw crosshairs at mouse position:<\/p>\n\n\n\n
class CrossHairsRenderer : Renderer2D\n{\n public CrossHairsRenderer(\n Chart control, ObservableCollection<Series> series) : base(series)\n {\n this.control = control;\n }\n\n protected override void Draw(RenderContext context)\n {\n var chartPos = control.PointToClient(Cursor.Position);\n var plotPos = context.Component.RootToLocal(\n new PointD(chartPos.X, chartPos.Y));\n using (var pen = new Pen(Color.Black, 2)\n { DashStyle = System.Drawing.Drawing2D.DashStyle.Dot })\n {\n context.Graphics.DrawLine(\n pen, (int)plotPos.X, 0,\n (int)plotPos.X, (int)context.Component.ActualHeight);\n context.Graphics.DrawLine(\n pen, 0, (int)plotPos.Y,\n (int)context.Component.ActualWidth, (int)plotPos.Y);\n }\n }\n\n Chart control;\n}<\/code><\/pre>\n\n\n\nThat would also require repainting the chart from MouseMove event handler:<\/p>\n\n\n\n
areaChart.Plot.SeriesRenderers.Add(\n new CrossHairsRenderer(areaChart, areaChart.Series));\nareaChart.MouseMove += OnChartMouseMove;\n\nvoid OnChartMouseMove(object? sender, MouseEventArgs e)\n{\n areaChart.Invalidate();\n}\n<\/code><\/pre>\n\n\n\nCrosshairs above do not access chart data and could be implemented as a custom Charting.Component object instead, overlaying it on top of the plot in chart’s layout. However the SeriesRender allows for easier integration with the plot, and for possible extensions to draw nearby values or coordinates from the series at the mouse location.<\/p>\n\n\n\n![\"\"](\"https:\/\/mindfusion.dev\/blog\/wp-content\/uploads\/2025\/05\/chart_crosshairs.png\")
<\/a><\/figure>\n\n\n\nAnd here’s a complete sample projects that shows both custom renderers together:
https:\/\/mindfusion.dev\/_samples\/ChartCrossHairs.zip<\/a><\/p>\n\n\n\nSample code above demonstrates MindFusion.Charting library for .NET Windows Forms, however we provide same API for Java, JavaScript and other .NET platforms such as Blazor and MAUI.<\/p>\n\n\n\n
Enjoy!<\/p>\n","protected":false},"excerpt":{"rendered":"
This post shows how to add custom graphics to a chart by inheriting the SeriesRenderer class. We’ll use it to show marker lines on top of an area chart, which could be used to emphasize important values (e.g. dates on … Continue reading