You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: blazor/chart/strip-line.md
+186Lines changed: 186 additions & 0 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -248,6 +248,192 @@ To create a stripline in a specific region with respect to a segment (segmented
248
248
```
249
249
{% previewsample "https://blazorplayground.syncfusion.com/embed/rNLqMVhHrJGZtGLh?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Chart With Segmented Stripline](../chart/images/strip-line/blazor-chart-segmented-stripline.png)" %}
250
250
251
+
## Stripline tooltip
252
+
253
+
Stripline tooltips provide additional contextual information on interaction with striplines in the chart. To display a tooltip on a stripline, add the **ChartStriplineTooltip** component inside the desired **ChartStripline** and set the **Enable** property to **true**. It is particularly useful for explaining the significance of specific ranges or thresholds marked by striplines.
254
+
255
+
### Default stripline tooltip code example:
256
+
257
+
Below is the simplest way to enable a stripline tooltip using default settings. The tooltip will display on interaction with the stripline.
258
+
259
+
```cshtml
260
+
261
+
@using Syncfusion.Blazor.Charts
262
+
263
+
@* Initialize the Chart to display vehicle traffic by time using a Spline series. *@
<ChartPrimaryYAxis Minimum="0" Maximum="1400" Interval="200" Title="Number of vehicles">
284
+
</ChartPrimaryYAxis>
285
+
286
+
<ChartSeriesCollection>
287
+
<ChartSeries Type="ChartSeriesType.Spline"
288
+
DataSource="@Traffic"
289
+
XName="Time"
290
+
YName="Vehicles"
291
+
Width="2"
292
+
Fill="#F43F5E">
293
+
</ChartSeries>
294
+
</ChartSeriesCollection>
295
+
</SfChart>
296
+
297
+
@code {
298
+
public class TrafficPoint
299
+
{
300
+
public DateTime Time { get; set; }
301
+
public double Vehicles { get; set; }
302
+
}
303
+
304
+
public List<TrafficPoint> Traffic = new ()
305
+
{
306
+
new TrafficPoint { Time = new DateTime(2024, 01, 01, 06, 00, 00), Vehicles = 380 },
307
+
new TrafficPoint { Time = new DateTime(2024, 01, 01, 07, 00, 00), Vehicles = 820 },
308
+
new TrafficPoint { Time = new DateTime(2024, 01, 01, 08, 00, 00), Vehicles = 1200 },
309
+
new TrafficPoint { Time = new DateTime(2024, 01, 01, 09, 00, 00), Vehicles = 980 },
310
+
new TrafficPoint { Time = new DateTime(2024, 01, 01, 10, 00, 00), Vehicles = 650 },
311
+
new TrafficPoint { Time = new DateTime(2024, 01, 01, 11, 00, 00), Vehicles = 520 }
312
+
};
313
+
}
314
+
315
+
```
316
+
317
+
318
+
319
+
### Tooltip customization properties
320
+
321
+
The stripline tooltip offers comprehensive customization options through the following properties:
322
+
323
+
-**Enable** - A boolean property that enables or disables the stripline tooltip. Default value is **false**.
324
+
325
+
-**Header** - Defines the title text displayed at the top of the tooltip.
326
+
327
+
-**Content** - Allows you to specify custom content for the tooltip body using a format string. The format supports token placeholders that are replaced with corresponding values at runtime. Supported tokens:
328
+
-**${stripline.text}** – The stripline label.
329
+
-**${stripline.start}** – The stripline start value.
330
+
-**${stripline.end}** – The stripline end value.
331
+
-**${axis.name}** – The axis name.
332
+
-**${stripline.segmentStart}** – The stripline segment start value (if applicable).
333
+
-**${stripline.segmentEnd}** – The stripline segment end value (if applicable).
334
+
-**${stripline.segmentAxisName}** – The stripline segment axis name (if applicable).
335
+
-**${stripline.size}** – The stripline size (if applicable).
336
+
337
+
-**Fill** - Sets the background color of the tooltip. Accepts any valid CSS color value (hex, rgb, rgba, named colors).
338
+
339
+
-**Opacity** - Controls the transparency level of the tooltip background. Accepts numeric values between 0 (completely transparent) and 1 (completely opaque). The default value is 0.75.
340
+
341
+
-**ShowHeaderLine** - A boolean property that controls the visibility of the horizontal separator line between the tooltip header and content. Set to **true** to display the line or **false** to hide it.
342
+
343
+
The **ChartStriplineTooltipTextStyle** component allows you to customize the appearance of text within the tooltip:
344
+
345
+
-**Size** - Specifies the font size of the tooltip text. Accepts pixel values (e.g., "12px").
346
+
347
+
-**Color** - Defines the text color. Accepts any valid CSS color value.
348
+
349
+
-**FontFamily** - Sets the font family for the tooltip text. Accepts standard CSS font family values (e.g., "Arial", "Segoe UI", "Roboto").
350
+
351
+
-**FontWeight** - Controls the thickness of the text.
352
+
353
+
The **ChartStriplineTooltipBorder** component enables you to add and customize borders around the tooltip:
354
+
355
+
-**Width** - Specifies the thickness of the tooltip border in pixels. Accepts numeric values. Default value is **0**.
356
+
357
+
-**Color** - Defines the color of the tooltip border. Accepts any valid CSS color value.
358
+
359
+
### Customized stripline tooltip code example:
360
+
361
+
```cshtml
362
+
363
+
@using Syncfusion.Blazor.Charts
364
+
365
+
@* Initialize the Chart to display department revenue by quarter using Column and Spline series. *@
new RevenuePoint { Quarter = "Q1", Revenue = 78 },
419
+
new RevenuePoint { Quarter = "Q2", Revenue = 88 },
420
+
new RevenuePoint { Quarter = "Q3", Revenue = 99 },
421
+
new RevenuePoint { Quarter = "Q4", Revenue = 92 }
422
+
};
423
+
424
+
public List<RevenuePoint> SupportData = new ()
425
+
{
426
+
new RevenuePoint { Quarter = "Q1", Revenue = 70 },
427
+
new RevenuePoint { Quarter = "Q2", Revenue = 83 },
428
+
new RevenuePoint { Quarter = "Q3", Revenue = 90 },
429
+
new RevenuePoint { Quarter = "Q4", Revenue = 85 }
430
+
};
431
+
}
432
+
433
+
```
434
+
435
+
436
+
251
437
N> Refer to our [Blazor Charts](https://www.syncfusion.com/blazor-components/blazor-charts) feature tour page for its groundbreaking feature representations and also explore our [Blazor Chart Example](https://blazor.syncfusion.com/demos/chart/line?theme=bootstrap5) to know various chart types and how to represent time-dependent data, showing trends at equal intervals.
0 commit comments