Tooltip shows incorrect series name in Column Chart

[Ashish Khanal]

Check out this runnable sample for this question:

https://blazorplayground.syncfusion.com/LtBItbtePTffkaqp

Why is it showing incorrect series name?

It should show "Gamma: 12" and not "08/05-PM: 12".

[AbubuckerSittiq RajaMohamed]

Hi Ashish,
Upon analyzing the sample you provided, we observed that you have utilized a tooltip header format that assigns the x value of the point as shown below:
​

<ChartTooltipSettings Enable="true" Header="<b>${point.x}</b>" EnableHighlight="true" />
​

By default, the chart displays the series name as the header for a normal tooltip and the x value as the header for a shared tooltip. Please refer to the revamped sample details available through the following link: https://blazorplayground.syncfusion.com/htVStbDRhIdbIPak

Kindly refer to our User Guide for the Blazor chart tooltip through the link: Tooltip in Blazor Charts Component | Syncfusion 

Regards,
Abubucker Sittiq R

[Ashish Khanal]

Thank you AbubuckerSittiq. 

That solved the issue for me!

Just pasting the final code here that I can run in https://blazorplayground.syncfusion.com/ for future reference:

@using Syncfusion.Blazor.Charts

<h3>Minimal Repro: Tooltip shows incorrect series name in Column Chart</h3>

<SfChart Title="Grouped Column Chart Tooltip Issue" Width="700px" Height="400px">

    <ChartPrimaryXAxis ValueType="Syncfusion.Blazor.Charts.ValueType.Category" Interval="1" />

    <ChartPrimaryYAxis Title="Value" />

    <ChartSeriesCollection>

        @foreach (var info in SeriesInfos.OrderBy(s => s.Order))

        {

            <ChartSeries DataSource="@ChartPoints.Where(p => p.Series == info.Name)"

                         XName="Category"

                         YName="Value"

                         Name="@info.Name"

                         Fill="@info.Color"

                         Type="Syncfusion.Blazor.Charts.ChartSeriesType.Column">

            </ChartSeries>

        }

    </ChartSeriesCollection>

    <ChartLegendSettings Visible="true" />

    <ChartTooltipSettings Enable="true" EnableHighlight="true" />

</SfChart>

@code {

    // Series info

    private List<SeriesInfo> SeriesInfos = new()

    {

        new SeriesInfo("Gamma", "#a5a5a5", 1),

        new SeriesInfo("Beta", "#ed7d31", 2),

        new SeriesInfo("Alpha", "#4472c4", 3)

    };

    // Chart points: some series are missing values for some date-AM/PM categories

    private List<DataPoint> ChartPoints = new()

    {

        // Only Alpha has "08/05-AM" value

        new DataPoint("08/05-AM", "Gamma", null),

        new DataPoint("08/05-AM", "Beta", null),

        new DataPoint("08/05-AM", "Alpha", 10),

        new DataPoint("08/05-PM", "Gamma", 12),

        new DataPoint("08/05-PM", "Beta", 15),

        new DataPoint("08/05-PM", "Alpha", 20),

        new DataPoint("08/06-PM", "Gamma", 22),

        new DataPoint("08/06-PM", "Beta", 25),

        new DataPoint("08/06-PM", "Alpha", 30),

        // Only Beta and Gamma have "08/07-AM"

        new DataPoint("08/07-AM", "Gamma", 32),

        new DataPoint("08/07-AM", "Beta", 35),

        new DataPoint("08/07-AM", "Alpha", null)

    };

    public record SeriesInfo(string Name, string Color, int Order);

    public class DataPoint

    {

        public DataPoint(string category, string series, double? value)

        {

            Category = category;

            Series = series;

            Value = value;

        }

        public string Category { get; set; }

        public string Series { get; set; }

        public double? Value { get; set; }

    }

}

[Durga Gopalakrishnan]

Most welcome. We are glad to hear that the solution worked for you! Thank you for sharing the final code snippet for future reference. It’s great to see your proactive approach, and this will surely be helpful for others facing similar scenarios.

If you have any further questions or need assistance with anything else, feel free to reach out. We're always here to help!