diff --git a/blazor/chart/images/strip-line/blazor-chart-stripline-tooltip.png b/blazor/chart/images/strip-line/blazor-chart-stripline-tooltip.png new file mode 100644 index 0000000000..28af19909d Binary files /dev/null and b/blazor/chart/images/strip-line/blazor-chart-stripline-tooltip.png differ diff --git a/blazor/chart/strip-line.md b/blazor/chart/strip-line.md index 0f7a4009d3..f5fc692ad6 100644 --- a/blazor/chart/strip-line.md +++ b/blazor/chart/strip-line.md @@ -248,6 +248,86 @@ To create a stripline in a specific region with respect to a segment (segmented ``` {% 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)" %} +## Stripline tooltip + +To enable the stripline tooltip add **ChartStriplineTooltip** inside the target Stripline and set **Enable** property to **true**. Use **Header** and **Content** properties to customize the tooltip's content, adjust visual emphasis with **Fill** and **Opacity** properties and style the tooltip's text and border with **ChartStriplineTooltipTextStyle** and **ChartStriplineTooltipBorder** properties. + +- Enable - Enables the stripline tooltip. +- Header - Sets the tooltip title text. +- Fill - Sets background color of the tooltip. +- Opacity - Sets transparency of the tooltip (0 to 1). +- Content - Template string for tooltip body content. +- ShowHeaderLine - Shows or hides the header separator line. +- ChartStriplineTooltipTextStyle - Configures the tooltip text (size, color, weight, family). +- ChartStriplineTooltipBorder - Configures the tooltip border (color, width). + +```cshtml + +@using Syncfusion.Blazor.Charts + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +@code { + public class RevenuePoint + { + public string Quarter { get; set; } + public double Revenue { get; set; } + } + + public List SalesData = new() + { + new RevenuePoint { Quarter = "Q1", Revenue = 78 }, + new RevenuePoint { Quarter = "Q2", Revenue = 88 }, + new RevenuePoint { Quarter = "Q3", Revenue = 99 }, + new RevenuePoint { Quarter = "Q4", Revenue = 92 } + }; + + public List SupportData = new() + { + new RevenuePoint { Quarter = "Q1", Revenue = 70 }, + new RevenuePoint { Quarter = "Q2", Revenue = 83 }, + new RevenuePoint { Quarter = "Q3", Revenue = 90 }, + new RevenuePoint { Quarter = "Q4", Revenue = 85 } + }; +} + +``` + +![Blazor Chart with Stripline Tooltip](images/strip-line/blazor-chart-stripline-tooltip.png) + 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. ## See also