Markers in Blazor Chart component

28 Jul 2021 / 1 minute to read

Data markers are used to provide information about the data points in the series. You can add a shape to adorn each data point.

Marker

Markers can be added to the points by enabling the Visible option of the marker property.

marker.razor

@using Syncfusion.Blazor.Charts

<SfChart>
    <ChartSeriesCollection>
        <ChartSeries DataSource="@ConsumerReports" XName="X" YName="Y" Type="ChartSeriesType.Line">
            <ChartMarker Visible="true" Height="10" Width="10"/>            
        </ChartSeries>
    </ChartSeriesCollection>
</SfChart>

@code{
    public class ChartData
    {
        public double X { get; set; }
        public double Y { get; set; }
    }

    public List<ChartData> ConsumerReports = new List<ChartData>
{
            new ChartData{ X= 2005, Y= 28 },
            new ChartData{ X= 2006, Y= 25 },
            new ChartData{ X= 2007, Y= 26 },
            new ChartData{ X= 2008, Y= 27 },
            new ChartData{ X= 2009, Y= 32 },
            new ChartData{ X= 2010, Y= 35 },
            new ChartData{ X= 2011, Y= 30 }
        };
}

Marker

Shape

Markers can be assigned with different shapes such as Rectangle, Circle, Diamond etc using the Shape property.

shape.razor

@using Syncfusion.Blazor.Charts

<SfChart>
    <ChartSeriesCollection>
        <ChartSeries DataSource="@ConsumerReports" XName="X" YName="Y" Type="ChartSeriesType.Line">
            <ChartMarker Visible="true" Height="10" Width="10" Shape="ChartShape.Diamond"/>            
        </ChartSeries>
    </ChartSeriesCollection>
</SfChart>

@code{
    public class ChartData
    {
        public double X { get; set; }
        public double Y { get; set; }
    }

    public List<ChartData> ConsumerReports = new List<ChartData>
{
            new ChartData{ X= 2005, Y= 28 },
            new ChartData{ X= 2006, Y= 25 },
            new ChartData{ X= 2007, Y= 26 },
            new ChartData{ X= 2008, Y= 27 },
            new ChartData{ X= 2009, Y= 32 },
            new ChartData{ X= 2010, Y= 35 },
            new ChartData{ X= 2011, Y= 30 }
        };
}

Shape

Images

Apart from the shapes, you can also add custom images to mark the data point using the ImageUrl property.

images.razor

@using Syncfusion.Blazor.Charts

<SfChart>
    <ChartSeriesCollection>
        <ChartSeries DataSource="@ConsumerReports" XName="X" YName="Y" Type="ChartSeriesType.Line">
            <ChartMarker Visible="true" Height="10" Width="10" ImageUrl="https://ej2.syncfusion.com/demos/src/chart/images/cloud.png">
            </ChartMarker>
        </ChartSeries>
    </ChartSeriesCollection>
</SfChart>

@code{
    public class ChartData
    {
        public double X { get; set; }
        public double Y { get; set; }
    }

    public List<ChartData> ConsumerReports = new List<ChartData>
{
            new ChartData{ X= 2005, Y= 28 },
            new ChartData{ X= 2006, Y= 25 },
            new ChartData{ X= 2007, Y= 26 },
            new ChartData{ X= 2008, Y= 27 },
            new ChartData{ X= 2009, Y= 32 },
            new ChartData{ X= 2010, Y= 35 },
            new ChartData{ X= 2011, Y= 30 }
        };
}

Customization

Marker color and border can be customized using Fill and Border properties.

custom.razor

@using Syncfusion.Blazor.Charts

<SfChart>
    <ChartPrimaryXAxis ValueType="Syncfusion.Blazor.Charts.ValueType.Category">
    </ChartPrimaryXAxis>

    <ChartSeriesCollection>
        <ChartSeries DataSource="@ConsumerReports" XName="X" YName="Y" Type="ChartSeriesType.Line">
            <ChartMarker Visible="true" Height="10" Width="10" Fill="red">
                <ChartMarkerBorder Width="2" Color="blue"></ChartMarkerBorder>
            </ChartMarker>
        </ChartSeries>
    </ChartSeriesCollection>
</SfChart>

@code{
    public class ChartData
    {
        public double X { get; set; }
        public double Y { get; set; }
    }

    public List<ChartData> ConsumerReports = new List<ChartData>
{
            new ChartData{ X= 2005, Y= 28 },
            new ChartData{ X= 2006, Y= 25 },
            new ChartData{ X= 2007, Y= 26 },
            new ChartData{ X= 2008, Y= 27 },
            new ChartData{ X= 2009, Y= 32 },
            new ChartData{ X= 2010, Y= 35 },
            new ChartData{ X= 2011, Y= 30 }
        };
}

Customization

Note: You can refer to our Blazor Charts feature tour page for its groundbreaking feature representations. You can also explore our Blazor Chart example to knows various chart types and how to represent time-dependent data, showing trends in data at equal intervals.

Markers in Blazor Chart component

Marker

Shape

Images

Customization

See Also