How to display chart tooltip without cutoff in Blazor Charts?

This article explains how to display chart series tooltip without cutoff.

Display chart tooltip without cutoff

Blazor Charts provides an option to view the chart series tooltip without any cutoff when it is displayed outside the chart area bounds.

This can be achieved by specifying overflow as visible for chart in CSS style using its class name .e-chart. This will display the tooltip fully on both left and right sides without any cutoff.

The below code example demonstrates how to display tooltip without cutoff.

@using Syncfusion.Blazor.Charts

<style>
   .e-chart {
       overflow: visible !important;
   }
</style>

<SfChart Width="250px" Height="250px">
   <ChartTooltipSettings Enable="true">
       <Template>
           @{
               var data = context as ChartTooltipInfo;
               <div>
                   <table style="width:100%;  border: 1px solid black;">
                       <tr>
                           <th colspan="2" bgcolor="#00FFFF">
                               Ultimate Glory: The Olympiad of Champions
                           </th>
                       </tr>
                       <tr><td bgcolor="#00FFFF">@data.X:</td><td bgcolor="#00FFFF">@data.Y</td></tr>
                   </table>
               </div>
           }
       </Template>
   </ChartTooltipSettings>
   <ChartSeriesCollection>
       <ChartSeries DataSource="@MedalDetails" XName="X" YName="YValue" Type="ChartSeriesType.Bar">
       </ChartSeries>
   </ChartSeriesCollection>
</SfChart>

@code {
   public class ChartData
   {
       public string X { get; set; }
       public double YValue { get; set; }
   }

   public List<ChartData> MedalDetails = new List<ChartData>
   {
       new ChartData { X= "USA", YValue= 46 },
       new ChartData { X= "GBR", YValue= 27 },
       //...
   };
} 

Output

Live Sample for Tooltip without Cutoff