Blazor
EditEdit This DocumentInstall NuGet
Demos
Support
Forum
FREE TRIAL
Search results

Table in Tooltip in Blazor Chart component

You can show the tooltip as table by using Template property in tooltip.

To access the aggregate values inside the Template, you can use the implicit named parameter context. You can type cast the context as IChartTemplate to get aggregate values inside template

            <ChartTooltipSettings Enable="true">
                <Template>
                    @{
                        var data = context as IChartTemplate;
                        <table>
                            <tr><td>Point Value: </td><td>@data.X : @data.Y</td></tr>
                            <tr><td><div id="chart_cloud"><img src="https://ej2.syncfusion.com/demos/src/chart/images/cloud.png" style="width: 41px; height: 41px" /></div></td></tr>
                        </table>
                    }
                </Template>
            </ChartTooltipSettings>
tooltip.razor
@using Syncfusion.Blazor.Charts

<div class="row">
    <div class="col-md-8">
        <SfChart Title="Profit Comparison of A and B" ModelType="ChartModel">
            <ChartPrimaryXAxis>
                <ChartAxisMajorGridLines Width="0"></ChartAxisMajorGridLines>
            </ChartPrimaryXAxis>
            <ChartPrimaryYAxis Minimum="0" Maximum="100" Interval="25" Title="Sales">
                <ChartAxisMajorGridLines Width="0"></ChartAxisMajorGridLines>
            </ChartPrimaryYAxis>
            <ChartSeriesCollection>
                <ChartSeries DataSource="@dataSource" Name="Product A" XName="x" Opacity="1" YName="y1" Type="ChartSeriesType.Column">
                </ChartSeries>
                <ChartSeries DataSource="@dataSource" Name="Product B" XName="x" Opacity="1" YName="y2" Type="ChartSeriesType.Column">
                </ChartSeries>
            </ChartSeriesCollection>
            <ChartArea>
                <ChartAreaBorder Width="0"></ChartAreaBorder>
            </ChartArea>
            <ChartTooltipSettings Enable="true">
                <Template>
                    @{
                        var data = context as IChartTemplate;
                        <table>
                            <tr><td>Point Value: </td><td>@data.X : @data.Y</td></tr>
                            <tr><td><div id="chart_cloud"><img src="https://ej2.syncfusion.com/demos/src/chart/images/cloud.png" style="width: 41px; height: 41px" /></div></td></tr>
                        </table>
                    }
                </Template>
            </ChartTooltipSettings>
        </SfChart>
    </div>
</div>
@code{
    IChartTemplate ChartModel = new IChartTemplate();
    public class ChartTooltipData
    {
        public double x { get; set; }
        public double y1 { get; set; }
        public double y2 { get; set; }
    }
    public class SelectionData
    {
        public double x { get; set; }
        public double y { get; set; }
    }



    private Random rnd = new Random();
    public List<ChartTooltipData> dataSource = new List<ChartTooltipData>();



    protected override async Task OnInitializedAsync()
    {
        for (int i = 0; i < 5; i++)
        {
            dataSource.Add(new ChartTooltipData { x = 1971 + i, y1 = rnd.Next(10, 100), y2 = rnd.Next(10, 100) });
        }
    }
}
Previous
Next