We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy.
template property of the tooltip."
|
<SfChart >
// add additional code here
<ChartTooltipSettings Enable="true" Format="${point.tooltip}"></ChartTooltipSettings> <ChartSeriesCollection> <ChartSeries DataSource="@ChartData" TooltipMappingName="Country" Name="Users" XName="XValue" YName="YValue" Width="2" Type="ChartSeriesType.Bar"> </ChartSeries> </ChartSeriesCollection> </SfChart>
@code{
public class CategoryData { public string XValue { get; set; } public double YValue { get; set; } public string Country { get; set; } } public List<CategoryData> ChartData = new List<CategoryData> { new CategoryData { XValue = "Germany", YValue = 72, Country = "GER: 72" }, new CategoryData { XValue = "Russia", YValue = 103.1, Country = "RUS: 103.1" }, new CategoryData { XValue = "Brazil", YValue = 139.1, Country = "BRZ: 139.1" }, new CategoryData { XValue = "India", YValue = 462.1, Country = "IND: 462.1" }, new CategoryData { XValue = "China", YValue = 721.4, Country = "CHN: 721.4" }, new CategoryData { XValue = "United States<br>Of America", YValue = 286.9, Country = "USA: 286.9" }, new CategoryData { XValue = "Great Britain", YValue = 115.1, Country = "GBR: 115.1" }, new CategoryData { XValue = "Nigeria", YValue = 97.2, Country = "NGR: 97.2" } }; } |
|
// add your additional code here
<SfChart>
<ChartEvents TooltipRender="TooltipEvent"></ChartEvents>
<ChartPrimaryXAxis ValueType="Syncfusion.Blazor.Charts.ValueType.DateTime" LabelFormat="dddd HH:mm">
</ChartPrimaryXAxis>
<ChartSeriesCollection>
<ChartSeries DataSource="@Sales" XName="Month" YName="SalesValue" Type="ChartSeriesType.Column">
</ChartSeries>
</ChartSeriesCollection>
<ChartTooltipSettings Enable="true"></ChartTooltipSettings>
</SfChart>
// add your additional code here
|
|
// add your additional code here
<SfChart>
<ChartEvents TooltipRender="TooltipEvent"></ChartEvents>
// add your additional code here
</SfChart>
@code{
public class SalesInfo
{
public DateTime Month { get; set; }
public double SalesValue { get; set; }
public string FirstName { get; set; }
public string LastName { get; set; }
public double Age { get; set; }
}
public List<SalesInfo> Sales = new List<SalesInfo>
{
new SalesInfo { Month = new DateTime(2005, 01, 01), SalesValue = 35, FirstName = "John", LastName= "Smith", Age=50 },
new SalesInfo { Month = new DateTime(2005, 02, 01), SalesValue = 28, FirstName = "Will", LastName= "Smith", Age=50 },
new SalesInfo { Month = new DateTime(2005, 03, 01), SalesValue = 34, FirstName = "David", LastName= "Williams", Age=50 },
new SalesInfo { Month = new DateTime(2005, 04, 01), SalesValue = 32, FirstName = "Snow", LastName= "White", Age=50 },
new SalesInfo { Month = new DateTime(2005, 05, 01), SalesValue = 40, FirstName = "Simon", LastName= "Cowell", Age=50 },
new SalesInfo { Month = new DateTime(2005, 06, 01), SalesValue = 32, FirstName = "John", LastName= "Smith", Age=50 },
new SalesInfo { Month = new DateTime(2005, 07, 01), SalesValue = 35, FirstName = "Lionel", LastName= "Messi", Age=50 }
};
public void TooltipEvent(TooltipRenderEventArgs args)
{
var point = Sales[Convert.ToInt32(args.Data.PointIndex)];
args.Text = args.Text + "<br> FirstName : " + point.FirstName + "<br> LastName : " + point.LastName + "<br> Age : " + point.Age;
// Here you can customize your code
}
}
// add your additional code here
|
