Blazor Chart Tooltip Cuts Off Long Text – How to Add Padding or Margin to a Syncfusion Blazor tooltip?

[Ashish Khanal]

Hello Syncfusion team,

I'm using the Syncfusion Blazor Chart component and have run into an issue with the shared tooltip. When the tooltip contains long series names and large numbers, the text is visually cut off—especially the first digit of numbers (see attached screenshot).

The Combined value is actually 6,932 which I was able to show partially by preventing it from being bold in SharedTooltipRender handler which still doesn't look good as that number 2 looks partially cut off.

What I’ve Tried (and none worked):

1. Adding CSS padding/margin to `.e-tooltip` and `.ejSVGTooltip` (including with `!important`), e.g.:

.my-chart .e-tooltip,
.my-chart .ejSVGTooltip {
    padding: 12px 18px !important;
    min-width: 260px !important;
  }

2. Appending spaces or zero-width characters (`\u200B`) to the tooltip text in the `SharedTooltipRender` event handler.

Question:

How to add margin or padding inside the tooltip so that long text and numbers are not cut off?

I do not want to build a fully custom tooltip template—just need a way to ensure the default tooltip displays all text and numbers properly.

Thank you for your help!

[Durga Gopalakrishnan]

Hi Ashish,

Thank you for reaching out.

We have reviewed your reported scenario based on the attached screenshot. However, we are currently unable to reproduce the reported issue on our end. The shared tooltip is rendered correctly without any cropping. For your reference, we have attached the tested sample along with the corresponding screenshot.

Sample : https://www.syncfusion.com/downloads/support/directtrac/general/ze/SharedTooltip.zip

We kindly request you to provide the following information, which will help us investigate the problem further:

• Please try to replicate the issue using the above shared sample.
• Share a sample or code snippet with the complete configuration where the issue occurs.
• Provide a video recording demonstrating the reported tooltip cropping behavior.
• Let us know if any additional customizations have been applied.

This information will help us analyze the scenario more accurately and assist you effectively.

Please feel free to reach out if you have any concerns or need further clarification.

Regards,

Durga Gopalakrishnan.

[Ashish Khanal]

Hi Durga,

This was difficult to recreate. But this comes as close to demonstrating the issue as possible.

Run it in Chrome. Looks like it renders fine in Edge though.

@page "/"

@rendermode InteractiveServer

@using Syncfusion.Blazor.Charts

@* Minimal repro for Syncfusion Blazor Chart tooltip cutoff issue *@

<style>

    .report-container {

        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;

        display: flex;

        flex-direction: column;

        gap: 16px;

        margin-bottom: 24px;

    }

    .my-charts {

        display: flex;

        flex-direction: column;

        gap: 16px;

    }

    .e-chart text {

        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;

    }

</style>

<div class="report-container">

    <div class="my-charts">

        <div class="my-chart1"></div>

        <div class="my-chart2">

            <SfChart Title="Tooltip Cutoff Repro" Width="100%">

                <ChartArea>

                    <ChartAreaBorder Width="0"></ChartAreaBorder>

                </ChartArea>

                <ChartMargin Right="15" />

                <ChartPrimaryXAxis ValueType="Syncfusion.Blazor.Charts.ValueType.Double"

                                   IntervalType="Syncfusion.Blazor.Charts.IntervalType.Auto"

                                   Title="Hour Ending"

                                   Interval="1" />

                <ChartPrimaryYAxis Title="Value" LabelFormat="N0">

                    <ChartAxisMajorTickLines Width="0"></ChartAxisMajorTickLines>

                    <ChartAxisLineStyle Width="0"></ChartAxisLineStyle>

                </ChartPrimaryYAxis>

                <ChartSeriesCollection>

                    <ChartSeries DataSource="@Data"

                                 XName="HourEnding"

                                 YName="YValue1"

                                 Name="Series 1"

                                 Type="ChartSeriesType.Line"

                                 Width="2"

                                 Fill="#FF4070"

                                 DashArray="5,2" />

                    <ChartSeries DataSource="@Data"

                                 XName="HourEnding"

                                 YName="YValue2"

                                 Name="Series 2"

                                 Type="ChartSeriesType.Line"

                                 Width="2"

                                 Fill="#A3D233"

                                 DashArray="5,2" />

                    <ChartSeries DataSource="@Data"

                                 XName="HourEnding"

                                 YName="YValue3"

                                 Name="Very very Long Series Name 3"

                                 Type="ChartSeriesType.Line"

                                 Width="2"

                                 Fill="#4F81BD"

                                 DashArray="5,2" />

                    <ChartSeries DataSource="@Data"

                                 XName="HourEnding"

                                 YName="YValue4"

                                 Name="Series 4"

                                 Type="ChartSeriesType.Line"

                                 Width="2"

                                 Fill="#FF4070" />

                    <ChartSeries DataSource="@Data"

                                 XName="HourEnding"

                                 YName="YValue5"

                                 Name="Series 5"

                                 Type="ChartSeriesType.Line"

                                 Width="2"

                                 Fill="#A3D233" />

                    <ChartSeries DataSource="@Data"

                                 XName="HourEnding"

                                 YName="YValue6"

                                 Name="Added Series 5 + Series 6"

                                 Type="ChartSeriesType.Line"

                                 Width="2"

                                 Fill="#4F81BD" />

                </ChartSeriesCollection>

                <ChartLegendSettings Visible="true" />

                <ChartTooltipSettings Enable="true" Shared="true" EnableTextWrap="true" />

            </SfChart>

        </div>

    </div>

</div>

@code {

    public class ChartData

    {

        public int HourEnding { get; set; }

        public double YValue1 { get; set; }

        public double YValue2 { get; set; }

        public double YValue3 { get; set; }

        public double YValue4 { get; set; }

        public double YValue5 { get; set; }

        public double YValue6 { get; set; }

    }

    List<ChartData> Data = new()

    {

        new() { HourEnding = 7, YValue1 = 153, YValue2 = 1225, YValue3 = 1378, YValue4 = 0, YValue5 = 0, YValue6 = 0 },

        // ... add more rows as needed but not required

    };

}

Here's Blazor Playground repro link as well:

https://blazorplayground.syncfusion.com/rXLnNLjfnvPYgGwj

This shows up like this in Chrome:

But looks fine in Edge:

[Durga Gopalakrishnan]

Ashish,

 

We have considered your reported scenario as bug and logged a defect report for the issue ”Chart shared tooltip text cuts off long text”. This fix will be available in our weekly patch release which is scheduled to be rolled on 17^th February 2026. We appreciate your patience until then. Currently feedback portal is down, we will share the bug feedback once portal is up.

[Durga Gopalakrishnan]

Ashish,

Thanks for being patience. Upon further analysis of reported problem, we found that the CSS used in sample is not inherited. We would like to inform you that the default theme is Material, which uses the Roboto font for all chart text elements and Bootstrap5 theme uses Segoe UI. In your sample, the Segoe UI font was applied through CSS. When Segoe UI is applied, the text is not measured correctly, as Chrome does not inherit the custom font style for the SVG text elements used in chart rendering.

To ensure consistent text measurement and rendering, you can either:

• Apply the CSS font style according to the theme, or
• Specify the desired font family in the chart’s tooltip text style based on CSS style

For your reference, we have attached modified samples demonstrating both approaches.

You can add the Roboto font to the .report-container and .e-chart text.

<style>

    .report-container {

        font-family: 'Roboto' 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;

    }

    .e-chart text {

        font-family: 'Roboto' 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;

    }

</style>

 

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

You can also set the tooltip font in the chart configuration.

<SfChart>

    <ChartTooltipSettings>

        <ChartTooltipTextStyle FontFamily="Segoe UI"></ChartTooltipTextStyle>

    </ChartTooltipSettings>

</SfChart>

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

Kindly revert us if you have any concerns.