Tooltip in Blazor Charts Component
3 Jun 202413 minutes to read
When the mouse is moved over a point on the chart, the tooltip will provide information about that point.
Enable tooltip
When space constraints prevent displaying information using data labels, the tooltip comes in useful. The Enable property in ChartTooltipSettings can be set to true to enable the tooltip.
@using Syncfusion.Blazor.Charts
<SfChart Title="Product Sales">
<ChartPrimaryXAxis ValueType="Syncfusion.Blazor.Charts.ValueType.Category" />
<ChartPrimaryYAxis LabelFormat="{value}M" >
</ChartPrimaryYAxis>
<ChartTooltipSettings Enable="true"></ChartTooltipSettings>
<ChartSeriesCollection>
<ChartSeries DataSource="@SalesReports" Name="Text" XName="X" YName="Y" Type="ChartSeriesType.Column">
</ChartSeries>
</ChartSeriesCollection>
</SfChart>
@code{
public class Data
{
public string X { get; set; }
public double Y { get; set; }
public string Text { get; set; }
}
public List<Data> SalesReports = new List<Data>
{
new Data{ X= "Jan", Y= 3, Text= "January" },
new Data{ X= "Feb", Y= 3.5, Text= "February" },
new Data{ X= "Mar", Y= 7, Text= "March" },
new Data{ X= "Apr", Y= 13.5, Text= "April" }
};
}
Tooltip format
By default, the tooltip displays information in points for the x and y values. In addition, further information can be displayed in the tooltip. For example, the format $series.name $point.x displays series name and point x-value in the tooltip.
@using Syncfusion.Blazor.Charts
<SfChart Title="Product Sales">
<ChartPrimaryXAxis ValueType="Syncfusion.Blazor.Charts.ValueType.Category" />
<ChartPrimaryYAxis LabelFormat="{value}M"></ChartPrimaryYAxis>
<ChartTooltipSettings Enable="true" Header="Sales" Format="<b>${series.name} : ${point.y}</b>"></ChartTooltipSettings>
<ChartSeriesCollection>
<ChartSeries DataSource="@SalesReports" XName="X" YName="Y" Type="ChartSeriesType.Column">
</ChartSeries>
</ChartSeriesCollection>
</SfChart>
@code{
public class Data
{
public string X { get; set; }
public double Y { get; set; }
public string Text { get; set; }
}
public List<Data> SalesReports = new List<Data>
{
new Data{ X= "Jan", Y= 3, Text= "January" },
new Data{ X= "Feb", Y= 3.5, Text= "February" },
new Data{ X= "Mar", Y= 7, Text= "March" },
new Data{ X= "Apr", Y= 13.5, Text= "April" }
};
}
Tooltip template
Any HTML elements can be displayed within the tooltip by using the Template property of the ChartTooltipSettings. You can use the data.X and data.Y as place holders in the HTML element to display x and y values of the corresponding data point.
@using Syncfusion.Blazor.Charts
<SfChart Title="Unemployment Rates 1975-2010">
<ChartSeriesCollection>
<ChartSeries DataSource="StepChartValues" Type="ChartSeriesType.StepLine" XName="Year" YName="YValue" Name="China">
<ChartMarker Visible="true" Width="10" Height="10">
</ChartMarker>
</ChartSeries>
</ChartSeriesCollection>
<ChartTooltipSettings Enable="true">
<Template>
@{
var data = context as ChartTooltipInfo;
<div>
<table style="width:100%; border: 1px solid black;">
<tr><th colspan="2" bgcolor="#00FFFF">Unemployment</th></tr>
<tr><td bgcolor="#00FFFF">@data.X:</td><td bgcolor="#00FFFF">@data.Y</td></tr>
</table>
</div>
}
</Template>
</ChartTooltipSettings>
</SfChart>
@code{
public List<StepChartData> StepChartValues = new List<StepChartData>
{
new StepChartData { Year = "1975", YValue = 16 },
new StepChartData { Year = "1980", YValue = 12.5 },
new StepChartData { Year = "1985", YValue = 19 },
new StepChartData { Year = "1990", YValue = 14.4 },
new StepChartData { Year = "1995", YValue = 11.5 },
new StepChartData { Year = "2000", YValue = 14 },
new StepChartData { Year = "2005", YValue = 10 },
new StepChartData { Year = "2010", YValue = 16 }
};
public class StepChartData
{
public string Year { get; set; }
public double YValue { get; set; }
}
}
Shared Tooltip template
Any HTML elements can be displayed within the tooltip by using the Template property of the ChartTooltipSettings. You can use the data.X and data.Y as place holders in the HTML element to display x and y values of the corresponding data point. To show the tooltip for more than one series, enable the Shared property in ChartTooltipSettings
@using Syncfusion.Blazor.Charts
<SfChart>
<ChartArea><ChartAreaBorder Width="0"></ChartAreaBorder></ChartArea>
<ChartPrimaryXAxis ValueType="Syncfusion.Blazor.Charts.ValueType.DateTime" LabelFormat="yyyy" IntervalType="IntervalType.Years" EdgeLabelPlacement="EdgeLabelPlacement.Shift">
<ChartAxisMajorGridLines Width="0"></ChartAxisMajorGridLines>
</ChartPrimaryXAxis>
<ChartPrimaryYAxis LabelFormat="{value}%" RangePadding="ChartRangePadding.None" Minimum="0" Maximum="100" Interval="20">
<ChartAxisLineStyle Width="0"></ChartAxisLineStyle>
<ChartAxisMajorTickLines Width="0"></ChartAxisMajorTickLines>
</ChartPrimaryYAxis>
<ChartTooltipSettings Enable="true" Shared="true">
<Template>
@{
var data = context as List<ChartTooltipInfo>;
<div>
<table style="width:100%; border: 1px solid black;" class="table-borderless">
<tr>
<th colspan="2" bgcolor="#00FFFF">@data[0].X</th>
</tr>
<tr>
<td bgcolor="#00FFFF">Germany</td>
<td bgcolor="#00FFFF">@data[0].Y</td>
</tr>
<tr>
<td bgcolor="#00FFFF">England</td>
<td bgcolor="#00FFFF">@data[1].Y</td>
</tr>
</table>
</div>
}
</Template>
</ChartTooltipSettings>
<ChartCrosshairSettings Enable="true" LineType="LineType.Vertical"></ChartCrosshairSettings>
<ChartSeriesCollection>
<ChartSeries DataSource="@ChartData" Name="Germany" XName="Period" Width="2"
Opacity="1" YName="ENG_InflationRate" Type="ChartSeriesType.Line">
<ChartMarker Visible="true" Width="10" Height="10">
</ChartMarker>
</ChartSeries>
<ChartSeries DataSource="@ChartData" Name="England" XName="Period" Width="2"
Opacity="1" YName="GER_InflationRate" Type="ChartSeriesType.Line">
<ChartMarker Visible="true" Width="10" Height="10">
</ChartMarker>
</ChartSeries>
</ChartSeriesCollection>
</SfChart>
@code {
public List<LineChartData> ChartData = new List<LineChartData>
{
new LineChartData { Period = new DateTime(2005, 01, 01), ENG_InflationRate = 21, GER_InflationRate = 28 },
new LineChartData { Period = new DateTime(2006, 01, 01), ENG_InflationRate = 24, GER_InflationRate = 44 },
new LineChartData { Period = new DateTime(2007, 01, 01), ENG_InflationRate = 36, GER_InflationRate = 48 },
new LineChartData { Period = new DateTime(2008, 01, 01), ENG_InflationRate = 38, GER_InflationRate = 50 },
new LineChartData { Period = new DateTime(2009, 01, 01), ENG_InflationRate = 54, GER_InflationRate = 66 },
new LineChartData { Period = new DateTime(2010, 01, 01), ENG_InflationRate = 57, GER_InflationRate = 78 },
new LineChartData { Period = new DateTime(2011, 01, 01), ENG_InflationRate = 70, GER_InflationRate = 84 }
};
public class LineChartData
{
public DateTime Period { get; set; }
public double ENG_InflationRate { get; set; }
public double GER_InflationRate { get; set; }
}
}
Tooltip customization
The Fill and Border properties are used to customize the background color and the border of the tooltip respectively. The ChartTooltipTextStyle is used to customize the tooltip text. The HighlightColor property is used to customize the point color while hovering for tooltip.
@using Syncfusion.Blazor.Charts
<SfChart Title="Product Sales" HighlightColor="red">
<ChartPrimaryXAxis ValueType="Syncfusion.Blazor.Charts.ValueType.Category" />
<ChartPrimaryYAxis LabelFormat="{value}M" >
</ChartPrimaryYAxis>
<ChartTooltipSettings Enable="true" Fill="gray">
<ChartTooltipBorder Color="#FF0000" Width="2"></ChartTooltipBorder>
</ChartTooltipSettings>
<ChartSeriesCollection>
<ChartSeries DataSource="@SalesReports" XName="X" YName="Y" Type="ChartSeriesType.Column">
</ChartSeries>
</ChartSeriesCollection>
</SfChart>
@code{
public class Data
{
public string X { get; set; }
public double Y { get; set; }
public string Text { get; set; }
}
public List<Data> SalesReports = new List<Data>
{
new Data{ X= "Jan", Y= 3, Text= "January" },
new Data{ X= "Feb", Y= 3.5, Text= "February" },
new Data{ X= "Mar", Y= 7, Text= "March" },
new Data{ X= "Apr", Y= 13.5, Text= "April" }
};
}
NOTE
Refer to our Blazor Charts feature tour page for its groundbreaking feature representations and also explore our Blazor Chart Example to know various chart types and how to represent time-dependent data, showing trends at equal intervals.