@@ -260,16 +260,21 @@ Below is the simplest way to enable a stripline tooltip using default settings.
260260
261261@using Syncfusion.Blazor.Charts
262262
263+ @* Initialize the Chart to display vehicle traffic by time using a Spline series. *@
263264<SfChart Title="Vehicle Traffic by Time">
264265 <ChartPrimaryXAxis ValueType="Syncfusion.Blazor.Charts.ValueType.DateTime"
265266 IntervalType="IntervalType.Hours"
266267 LabelFormat="h tt">
267268 <ChartStriplines>
269+
270+ @* Stripline: visual band marking Rush Hour on the X axis *@
268271 <ChartStripline Start="new DateTime(2024, 01, 01, 07, 00, 00)"
269272 End="new DateTime(2024, 01, 01, 09, 00, 00)"
270273 Text="Rush Hour"
271274 Color="#FFED4A"
272275 Visible="true">
276+
277+ @* Stripline Tooltip: shows 'Rush Hour' with band hover/tap *@
273278 <ChartStriplineTooltip Enable="true"></ChartStriplineTooltip>
274279 </ChartStripline>
275280 </ChartStriplines>
@@ -357,6 +362,7 @@ The **ChartStriplineTooltipBorder** component enables you to add and customize b
357362
358363@using Syncfusion.Blazor.Charts
359364
365+ @* Initialize the Chart to display department revenue by quarter using Column and Spline series. *@
360366<SfChart Title="Department Revenue by Quarter">
361367 <ChartPrimaryXAxis ValueType="Syncfusion.Blazor.Charts.ValueType.Category">
362368 <ChartAxisMajorGridLines Width="0"></ChartAxisMajorGridLines>
@@ -366,10 +372,13 @@ The **ChartStriplineTooltipBorder** component enables you to add and customize b
366372 <ChartPrimaryYAxis Minimum="65" Maximum="110" Interval="5" LabelFormat="${value}k" RangePadding="Syncfusion.Blazor.Charts.ChartRangePadding.None">
367373 <ChartAxisMajorTickLines Width="0"></ChartAxisMajorTickLines>
368374 <ChartStriplines>
375+
376+ @* Stripline: Highlights the upper revenue target range from 95k to 110k with text style and border customization. *@
369377 <ChartStripline Start="95" End="110" Color="#FFF59E" HorizontalAlignment="Anchor.Middle" Visible="true">
370378 <ChartStriplineTextStyle Size="12px" Color="#0b3a66" FontWeight="600"></ChartStriplineTextStyle>
371379 <ChartStriplineBorder Width="0"></ChartStriplineBorder>
372380
381+ @* Stripline Tooltip: providing interactive context with customizatioon for the target bands over hover/tap *@
373382 <ChartStriplineTooltip Enable="true"
374383 Header="Target"
375384 Content="Range: ${stripline.start} - ${stripline.end}<br/>Axis: ${axis.name}"
0 commit comments