DxChartTooltip.Position Property

Specifies the tooltip position.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v20.2.dll

Declaration

[Parameter]
[DefaultValue(RelativePosition.Inside)]
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.

<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 shows how to display tooltips outside the series:

<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