Search results

Threshold in Chart in Blazor Chart component

08 Apr 2021 / 1 minute to read

You can mark a threshold in chart by using the ChartStripline.

To mark a threshold in chart, follow the given steps:

Step 1:

By using the Start and End properties of ChartStripline in vertical axis, you can mark the threshold for y values of the data.

Copied to clipboard
 <ChartPrimaryYAxis>
        <ChartStripLines>
            <ChartStripline Start="30" End="30.1" Color="red"></ChartStripline>
        </ChartStripLines>
  </ChartPrimaryYAxis>
threshold.razor
Copied to clipboard
@using Syncfusion.Blazor.Charts

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

    <ChartPrimaryYAxis>
        <ChartStriplines>
            <ChartStripline Start="30" End="30.1" Color="red"></ChartStripline>
        </ChartStriplines>
    </ChartPrimaryYAxis>

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

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

    public List<ChartData> WeatherReports = new List<ChartData>
{
    new ChartData { X = "Sun", Y = 28 },
    new ChartData { X = "Mon", Y = 27 },
    new ChartData { X = "Tue", Y = 33 },
    new ChartData { X = "Wed", Y = 36 },
    new ChartData { X = "Thu", Y = 28 },
    new ChartData { X = "Fri", Y = 30 },
    new ChartData { X = "Sat", Y = 31 }
    };
}

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.