AxisLabelRender on Tooltip?

[Yongkee Cho]

Can I show rendered axis label on tooltip as well? The x axis label is timespan in seconds i want it to be shown in the tooltip.

<SfChart Palettes="model.Palettes">
    <ChartEvents OnAxisLabelRender="AxisLabelRender"></ChartEvents>
    <ChartTooltipSettings Enable="true" Shared="true" Format="${series.name} : ${point.x} : ${point.y}"></ChartTooltipSettings>
    <ChartCrosshairSettings Enable="true" LineType="LineType.Vertical"/>
    <ChartPrimaryXAxis Title="@model.XAxis" LabelIntersectAction="LabelIntersectAction.Hide" />
    <ChartPrimaryYAxis Title="@model.YAxis"/>
    <ChartSeriesCollection>
        @foreach (var yName in model.YAxisResults)
        {
            <ChartSeries Name="@yName" DataSource="@Results" XName="@model.XAxis" YName="@yName" GroupName="@model.YAxis" Type="ChartSeriesType.Line" />
        }
    </ChartSeriesCollection>
    <ChartLegendSettings Visible="true" Position="LegendPosition.Top"/>
</SfChart>

@code {

    private void AxisLabelRender(AxisLabelRenderEventArgs args)
    {
        var day = 60 * 60 * 24;
        if (args.Axis.Name == "PrimaryXAxis")
        {
            var format = args.Value < day ? "hh\\:mm\\:ss" : "d\\.hh\\:mm\\:ss";
            args.Text = TimeSpan.FromSeconds(args.Value).ToString(format);
        }
    }
}

[Durga Gopalakrishnan]

Hi Yongkee,

Greetings from Syncfusion.

We have ensured the reported scenario using the code snippet you provided. The formatted x-axis label value is correctly displayed in the chart series tooltip. Since the data source was not available, we used the minute-based data for the chart series.

Sample : https://blazorplayground.syncfusion.com/LDBTZuWHqPaIYKnG

If you're still encountering issues, please try to replicate the problem using the sample provided above. Alternatively, you can share the data source you're using in your application. This will help us to validate the issue more effectively and provide better assistance. Let us know if you have any other concerns or questions.

Regards,

Durga Gopalakrishnan.

[Yongkee Cho]

Hi Durga, Thanks for the example. I think the only difference is our x axis time is elapsed time in seconds, whose type is double. While you calculated the time span from data time. So we cannot use axis data type as datetime but double, which shows x value on the tooltip as original double value instead of from axis label render value.

[Durga Gopalakrishnan]

Yongkee,

Your requirement can be achieved using SharedTooltipRender event in chart. Using this event, you can customize the shared tooltip text based on your need. We have attached the modified sample for your reference. Please check with the below snippet and sample.

<SfChart>

    <ChartEvents SharedTooltipRender="TooltipRender"></ChartEvents>

</SfChart>

public void TooltipRender(SharedTooltipRenderEventArgs args)

{

    var day = 60 * 60 * 24;

    var val = Convert.ToDouble(args.HeaderText);

    var format = val < day ? "hh\\:mm\\:ss" : "d\\.hh\\:mm\\:ss";

    args.HeaderText = TimeSpan.FromSeconds(val).ToString(format);

}

Sample : https://blazorplayground.syncfusion.com/VXrpjaBUBSGPrryn

UG : https://blazor.syncfusion.com/documentation/chart/events#sharedtooltiprender

Please let us know if you have any concerns.