Draw Horizontal and Vertical Lines in a Blazor Chart

Environment

Product

Charts for Blazor

Description

This KB article answers the following questions:

• How to draw horizontal and vertical lines in Telerik Blazor Charts?
• How to put pins or markers in Telerik Blazor Charts?
• Is it possible to add limits or thresholds on the Telerik Blazor Chart?

Solution

To configure the Chart for drawing horizontal and vertical lines, you can use plot bands or additional line series.

Using Plot Bands

Steps for drawing vertical and horizontal lines with plot bands:

1. Add PlotBand instances inside the PlotBands collection of a Chart axis.
2. Provide a valid CSS color to the Color parameter.
3. Set the From and To plot band parameters.

Drawing Horizontal and Vertical lines with Plot Bands

<TelerikChart>
    <ChartTitle Text="Unrecoverable Errors Per Minute vs. Signal Level"></ChartTitle>

    <ChartSeriesItems>
        <ChartSeries Type="ChartSeriesType.Scatter"
                     Data="@SeriesData"
                     Name="APSK modulation"
                     XField="@nameof(ModelData.Strength)"
                     YField="@nameof(ModelData.Errors)">
        </ChartSeries>
    </ChartSeriesItems>

    <ChartXAxes>
        <ChartXAxis Max="-30" AxisCrossingValue="@(new object[] { -100 })">
            <ChartXAxisTitle Text="Signal Strength, dBm"></ChartXAxisTitle>
            <ChartXAxisPlotBands>
                <ChartXAxisPlotBand From="-89.7" To="-89.5" Color="blue" />
                <ChartXAxisPlotBand From="-50" To="-49.5" Color="orange" />
            </ChartXAxisPlotBands>
        </ChartXAxis>
    </ChartXAxes>

    <ChartYAxes>
        <ChartYAxis Max="20">
            <ChartYAxisTitle Text="Error count"></ChartYAxisTitle>
            <ChartYAxisPlotBands>
                <ChartYAxisPlotBand From="1.5" To="1.7" Color="green"></ChartYAxisPlotBand>
                <ChartYAxisPlotBand From="18.5" To="18.6" Color="red"></ChartYAxisPlotBand>
            </ChartYAxisPlotBands>
        </ChartYAxis>
    </ChartYAxes>
</TelerikChart>

@code {
    #region PlotBandsData
    private List<ModelData> SeriesData { get; set; }

    protected override void OnInitialized()
    {
        SeriesData = new List<ModelData>();

        var rnd = new Random();

        for (int i = 0; i < 60; i++)
        {
            SeriesData.Add(new ModelData
                {
                    Strength = rnd.Next(-90 + i / 3, -90 + i),
                    Errors = rnd.Next(i / 20, i / 3)
                });
        }

        base.OnInitialized();
    }

    public class ModelData
    {
        public double Strength { get; set; }
        public double Errors { get; set; }
    }
    #endregion
}

Using Additional Line Series

Steps for drawing horizontal and vertical lines with additional Lines Series:

1. Add ChartSeries instances of type ChartSeriesType.Line based on the needed number of lines.
2. Set data for the lines based on the information shown from the main Chart.

Drawing Horizontal and Vertical lines with additional Lines Chart

<TelerikChart>
    <ChartSeriesItems>
        <ChartSeries Type="ChartSeriesType.Column" Name="Column 1" Data="@firstColumnTypeData">
        </ChartSeries>
        <ChartSeries Type="ChartSeriesType.Column" Name="Column 2" Data="@secondColumnTypeData">
        </ChartSeries>
        <ChartSeries Type="ChartSeriesType.Line" Name="Line 1" Data="@firstLineTypeData">
        </ChartSeries>
        <ChartSeries Type="ChartSeriesType.Line" Name="Line 2" Data="@secondLineTypeData">
        </ChartSeries>
    </ChartSeriesItems>

    <ChartCategoryAxes>
        <ChartCategoryAxis Categories="@xColumnAxisItems"></ChartCategoryAxis>
    </ChartCategoryAxes>

    <ChartTitle Text="Draw Horizontal and Vertical Lines"></ChartTitle>

    <ChartLegend Position="ChartLegendPosition.Right">
    </ChartLegend>
</TelerikChart>

@code {
    #region LinesData
    private List<object> firstColumnTypeData = new List<object>() { 10, 2, 5, 6 };
    private List<object> secondColumnTypeData = new List<object>() { 5, 8, 2, 7 };

    private List<object> firstLineTypeData = new List<object>() { 8, 8, 8, 6 };
    private List<object> secondLineTypeData = new List<object>() { 5, 8, 2, 7 };

    private string[] xColumnAxisItems = new string[] { "Q1", "Q2", "Q3", "Q4" };
    #endregion
}

See Also

• Charts Plot Bands
• Lines Chart