DxChartTooltip.ChildContent Property

Specifies Tooltip content.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v25.1.dll

NuGet Package: DevExpress.Blazor

Declaration

[Parameter]
public RenderFragment<ChartTooltipData> ChildContent { get; set; }

Property Value

Type	Description
RenderFragment<ChartTooltipData>	Content markup.

Remarks

The ChildContent component parameter can store custom component content that does not belong to other component’s RenderFragment properties as shown below:

<DxChart Data="@SalesData">
    <DxChartTooltip Enabled="true" Position="RelativePosition.Outside">
        <ChildContent>
            <div style="margin: 0.75rem">
                <div class="font-weight-bold">@context.Point.SeriesName</div>
                <div>City: @context.Point.Argument</div>
               <div>Amount: @context.Point.Value</div>
            </div>
        </ChildContent>
    </DxChartTooltip>
    @* ... *@
</DxChart>

Note

Since ChildContent contains nested markup of its parent class, the template content must conform to HTML semantics.

You can omit the <ChildContent> tag and specify the markup directly in the <DxChartTooltip> tag:

<DxChart Data="@SalesData">
    <DxChartTooltip Enabled="true" Position="RelativePosition.Outside">
        <div style="margin: 0.75rem">
            <div class="font-weight-bold">@context.Point.SeriesName</div>
            <div>City: @context.Point.Argument</div>
            <div>Amount: @context.Point.Value</div>
        </div>
    </DxChartTooltip>
    @* ... *@
</DxChart>