DxChartBase.TooltipShowing Event

Fires before a tooltip appears.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v24.1.dll

NuGet Package: DevExpress.Blazor

Declaration

[Parameter]
public EventCallback<ChartTooltipShowingEventArgs> TooltipShowing { get; set; }

Event Data

The TooltipShowing event's data class is ChartTooltipShowingEventArgs. The following properties provide information specific to this event:

Property	Description
Cancel	Gets or sets a value indicating whether the event should be canceled. Inherited from CancelEventArgs.
TooltipInfo	Returns information about the tooltip that is about to appear.

Remarks

Add a DxChartTooltip object to chart markup and set the DxChartTooltip.Enabled property to true to enable tooltip functionality.

The chart component raises the TooltipShowing event in the following cases:

• You call DxChart.ShowTooltip, DxPieChart.ShowTooltip, or DxPolarChart.ShowTooltip method overloads.
• A user hovers a mouse pointer over a series point.

In the event handler, use the TooltipInfo argument property to get information about the tooltip that is about to appear.

You can also set the event’s Cancel argument property to true to disable tooltip functionality for individual series points.

The following code snippet disables tooltips for series points that correspond to the specified series:

Razor

<DxChart Data="@SalesData"
         TooltipShowing="@OnTooltipShowing">
    <DxChartLineSeries Name="2017"
                       Filter="@((SaleInfo s) => s.Date.Year == 2017)"
                       ArgumentField="@(s => s.City)"
                       ValueField="@(s => s.Amount)"
                       SummaryMethod="Enumerable.Sum" />
    <DxChartLineSeries Name="2018"
                       Filter="@((SaleInfo s) => s.Date.Year == 2018)"
                       ArgumentField="@(s => s.City)"
                       ValueField="@(s => s.Amount)"
                       SummaryMethod="Enumerable.Sum" />
    <DxChartLegend AllowToggleSeries="true" 
                   Orientation="Orientation.Vertical"
                   Position="RelativePosition.Outside"
                   HorizontalAlignment="HorizontalAlignment.Right">
        <DxChartTitle Text="Years" />
    </DxChartLegend>
    <DxChartTooltip Enabled="true" />
</DxChart>

@code {
    void OnTooltipShowing(ChartTooltipShowingEventArgs e) {
        if (e.TooltipInfo.Series.Name == "2017")
            e.Cancel = true;
    }

    IEnumerable<SaleInfo> SalesData;
    protected override async Task OnInitializedAsync() {
        SalesData = await Sales.GetSalesAsync();
    }
}

SalesData.cs

public class Sales {
    static IList<SaleInfo> dataSource;

    public class SaleInfo {
        public int OrderId { get; set; }
        public string Region { get; set; }
        public string Country { get; set; }
        public string City { get; set; }
        public int Amount { get; set; }
        public DateTime Date { get; set; }
    }
    static Sales() {
        CreateDataSource();
    }

    public static Task<IQueryable<SaleInfo>> GetSalesAsync() {
        return Task.FromResult(dataSource.AsQueryable());
    }

    static void CreateDataSource() {
        dataSource = new List<SaleInfo> {
            new SaleInfo {
                OrderId = 10248,
                Region = "North America",
                Country = "United States",
                City = "New York",
                Amount = 1740,
                Date = DateTime.Parse("2017/01/06")
            },
            new SaleInfo {
                OrderId = 10249,
                Region = "North America",
                Country = "United States",
                City = "Los Angeles",
                Amount = 850,
                Date = DateTime.Parse("2017/01/13")
            },
            new SaleInfo {
                OrderId = 10250,
                Region = "North America",
                Country = "United States",
                City = "Denver",
                Amount = 2235,
                Date = DateTime.Parse("2017/01/07")
            },
            new SaleInfo {
                OrderId = 10251,
                Region = "North America",
                Country = "Canada",
                City = "Vancouver",
                Amount = 1965,
                Date = DateTime.Parse("2017/01/03")
            },
            new SaleInfo {
                OrderId = 10252,
                Region = "North America",
                Country = "Canada",
                City = "Edmonton",
                Amount = 880,
                Date = DateTime.Parse("2017/01/10")
            },
            new SaleInfo {
                OrderId = 10253,
                Region = "South America",
                Country = "Brazil",
                City = "Rio de Janeiro",
                Amount = 5260,
                Date = DateTime.Parse("2017/01/17")
            },
            new SaleInfo {
                OrderId = 10254,
                Region = "South America",
                Country = "Argentina",
                City = "Buenos Aires",
                Amount = 2790,
                Date = DateTime.Parse("2017/01/21")
            },
            new SaleInfo {
                OrderId = 10255,
                Region = "South America",
                Country = "Paraguay",
                City = "Asuncion",
                Amount = 3140,
                Date = DateTime.Parse("2017/01/01")
            },
            new SaleInfo {
                OrderId = 10256,
                Region = "Europe",
                Country = "United Kingdom",
                City = "London",
                Amount = 6175,
                Date = DateTime.Parse("2017/01/24")
            },
            new SaleInfo {
                OrderId = 10257,
                Region = "Europe",
                Country = "Germany",
                City = "Berlin",
                Amount = 4575,
                Date = DateTime.Parse("2017/01/11")
            },
            new SaleInfo {
                OrderId = 10517,
                Region = "North America",
                Country = "United States",
                City = "New York",
                Amount = 7710,
                Date = DateTime.Parse("2018/01/18")
            },
            new SaleInfo {
                OrderId = 10518,
                Region = "North America",
                Country = "United States",
                City = "Los Angeles",
                Amount = 7975,
                Date = DateTime.Parse("2018/01/10")
            },
            new SaleInfo {
                OrderId = 10519,
                Region = "North America",
                Country = "United States",
                City = "Denver",
                Amount = 3285,
                Date = DateTime.Parse("2018/01/13")
            },
            new SaleInfo {
                OrderId = 10520,
                Region = "North America",
                Country = "Canada",
                City = "Vancouver",
                Amount = 2580,
                Date = DateTime.Parse("2018/01/22")
            },
            new SaleInfo {
                OrderId = 10521,
                Region = "North America",
                Country = "Canada",
                City = "Edmonton",
                Amount = 2160,
                Date = DateTime.Parse("2018/01/26")
            },
            new SaleInfo {
                OrderId = 10522,
                Region = "South America",
                Country = "Brazil",
                City = "Rio de Janeiro",
                Amount = 1100,
                Date = DateTime.Parse("2018/01/25")
            },
            new SaleInfo {
                OrderId = 10523,
                Region = "South America",
                Country = "Argentina",
                City = "Buenos Aires",
                Amount = 4425,
                Date = DateTime.Parse("2018/01/21")
            },
            new SaleInfo {
                OrderId = 10524,
                Region = "South America",
                Country = "Paraguay",
                City = "Asuncion",
                Amount = 1360,
                Date = DateTime.Parse("2018/01/22")
            },
            new SaleInfo {
                OrderId = 10525,
                Region = "Europe",
                Country = "United Kingdom",
                City = "London",
                Amount = 3250,
                Date = DateTime.Parse("2018/01/14")
            },
            new SaleInfo {
                OrderId = 10526,
                Region = "Europe",
                Country = "Germany",
                City = "Berlin",
                Amount = 5550,
                Date = DateTime.Parse("2018/01/21")
            },
        };
    }
}