Blazor
EditEdit This Document
Demos
Support
Forum
Upgrade Guide
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 ChartTooltipInfo to get aggregate values inside template

            <ChartTooltipSettings Enable="true">
                <Template>
                    @{
                        var data = context as ChartTooltipInfo;
                        <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">
            <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 ChartTooltipInfo;
                        <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
{
    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 void OnInitialized()
    {
        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