blazor-devexpress-dot-blazor-dot-dxchartbase-296d4384.md
Fires before a tooltip appears.
Namespace : DevExpress.Blazor
Assembly : DevExpress.Blazor.v25.2.dll
NuGet Package : DevExpress.Blazor
[Parameter]
public EventCallback<ChartTooltipShowingEventArgs> TooltipShowing { get; set; }
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. |
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:
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:
<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();
}
}
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")
},
};
}
}
See Also