Threshold in Chart in Blazor Charts Component

10 Aug 20233 minutes to read

The threshold level can be indicated in the chart using the ChartStripline. Follow the steps below to add a threshold to the chart.

Step 1:

Render a chart with the required series using ChartSeriesCollection.

<SfChart Title="Weather condition JPN vs DEU">
    <ChartPrimaryXAxis ValueType="Syncfusion.Blazor.Charts.ValueType.Category" />
    <ChartSeriesCollection>
        <ChartSeries DataSource="@WeatherReports" XName="X" YName="Y" Type="ChartSeriesType.Column" />
    </ChartSeriesCollection>
</SfChart>

Step 2:

Since this threshold must be added to the measure axis, the ChartStripline setting will be set to ChartPrimaryYAxis.
Using the ChartStriplines collection property of the axis, multiple thresholds can be added to a chart.

...
<ChartPrimaryYAxis>
    <ChartStriplines>
        <ChartStripline Start="30" Size="1" ></ChartStripline>
    </ChartStriplines>
</ChartPrimaryYAxis>
...

Step 3:

To represent the severity of the threshold, a color can be set to the stripline using the Color property of the ChartStripline.

...
<ChartPrimaryYAxis>
    <ChartStriplines>
        <ChartStripline Start="30" Size="1" Color="red" ></ChartStripline>
    </ChartStriplines>
</ChartPrimaryYAxis>
...

Step 4:

The stripline’s order, which determines whether it is rendered behind or above the series elements, can be customized by ZIndex property of the ChartStripline.

...
<ChartPrimaryYAxis>
    <ChartStriplines>
        <ChartStripline Start="30" Size="1" Color="red" ZIndex="ZIndex.Over"></ChartStripline>
    </ChartStriplines>
</ChartPrimaryYAxis>
...

The complete code snippet for the preceding steps is available below.

@using Syncfusion.Blazor.Charts

<SfChart Title="Weather condition JPN vs DEU">
    <ChartPrimaryXAxis ValueType="Syncfusion.Blazor.Charts.ValueType.Category" />
    <ChartPrimaryYAxis>
        <ChartStriplines>
            <ChartStripline Start="30" Size="1" ZIndex="ZIndex.Over" Color="red"></ChartStripline>
        </ChartStriplines>
    </ChartPrimaryYAxis>
    <ChartSeriesCollection>
        <ChartSeries DataSource="@WeatherReports" XName="X" YName="Y" Type="ChartSeriesType.Column" />
    </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= "Jan", Y= 15 },
         new ChartData{ X= "Feb", Y= 20 },
         new ChartData{ X= "Mar", Y= 35 },
         new ChartData{ X= "Apr", Y= 40 },
         new ChartData{ X= "May", Y= 80 },
         new ChartData{ X= "Jun", Y= 70 },
         new ChartData{ X= "Jul", Y= 65 },
         new ChartData{ X= "Aug", Y= 55 },
         new ChartData{ X= "Sep", Y= 50 },
         new ChartData{ X= "Oct", Y= 30 },
         new ChartData{ X= "Nov", Y= 35 },
         new ChartData{ X= "Dec", Y= 35 }
    };
}

NOTE

Refer to our Blazor Charts feature tour page for its groundbreaking feature representations and also explore our Blazor Chart Example to know various chart types and how to represent time-dependent data, showing trends at equal intervals.