Search results

Threshold in Chart in Blazor Chart component

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 ChartStripLines object in vertical axis, you can mark the threshold for y values of the series.

 <ChartPrimaryYAxis>
        <ChartStripLines>
            <ChartStripLine Start="30" SizeType="SizeType.Pixel" Color="red"></ChartStripLine>
        </ChartStripLines>
  </ChartPrimaryYAxis>
threshold.razor
@using Syncfusion.Blazor.Charts

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

    <ChartPrimaryYAxis>
        <ChartStriplines>
            <ChartStripline Start="30" SizeType="SizeType.Pixel" Color="red"></ChartStripline>
        </ChartStriplines>
    </ChartPrimaryYAxis>

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

@code{
    IChartTemplate Model = new IChartTemplate();
    public class ChartData
    {
        public string X;
        public double Y;
    }

    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 }
    };
}