Skip to main content

DevExpress v24.2 Update — Your Feedback Matters

Our What's New in v24.2 webpage includes product-specific surveys. Your response to our survey questions will help us measure product satisfaction for features released in this major update and help us refine our plans for our next major release.

Take the survey Not interested

DxChartTooltip.Position Property

Specifies the tooltip position.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v24.2.dll

NuGet Package: DevExpress.Blazor

#Declaration

C#
[DefaultValue(RelativePosition.Inside)]
[Parameter]
public RelativePosition Position { get; set; }

#Property Value

Type Default Description
RelativePosition Inside

A RelativePosition enumeration value.

Available values:

Name Description
Inside

An element is displayed inside the component.

Outside

An element is displayed outside the component.

#Remarks

The Chart control displays tooltips if the Enabled property is set to true. The Position property specifies whether the chart displays tooltips inside or outside the series.

The Position property can be applied to the following series types:

The Position property’s default value specifies that tooltips are displayed inside the series.

Razor
<DxChart Data="@SalesData">
    <DxChartTooltip Enabled="true">
        <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>

Chart Tooltip Position - Default

The following example displays tooltips outside the series:

Razor
<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>

Chart Tooltip Position - Outside

Run Demo: Charts - Tooltip Customization

See Also