textoverflow at chat title does not work

[Samo]

My SfChart uses Title property which uses the following style.

<ChartTitleStyle TextOverflow="TextOverflow.Wrap" TextAlignment="Alignment.Near" />

Based on this setting, I would assume that the title will be arranged in two or more rows if there is insufficient space in the first row. In my case, I get shorter text which ends with... 

[Durga Gopalakrishnan]

Hi Samo,

Greetings from Syncfusion.

We have ensured your reported scenario with attached code snippet and screenshot in latest version 27.1.51. When the text overflow property is set to wrap for the chart title, the text will automatically wrap to the next line if there is insufficient space. We have attached the tested sample and screenshot for your reference.

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

If you are still facing problem, please share the following information which will be helpful for further analysis and provide you the solution sooner.

• Try to replicate the problem in above sample.
• Share your default system culture.
• Browser and OS used.
• Any other customization if done.

Regards,

Durga Gopalakrishnan.

[Samo]

Thanks for your reply. I can confirm that it works, but another problem occurs. If the title is wrapped in two lines the height of the char series is reduced. To overcome this problem I added the Width property which unfortunately does not work in the case of Type="ChartSeriesType.StackingBar100".  Can you confirm if it is the bug?

<ChartSeriesCollection >

    @foreach (var seriesData in QuestionsResponseBar.ResponseBar)

    {

            <ChartSeries Width="20" DataSource="@seriesData.Data" Fill="@seriesData.Fill" XName="@seriesData.XName" YName="@seriesData.YName" Type="ChartSeriesType.StackingBar100" >

                <ChartCornerRadius BottomLeft="@seriesData.LeftRadius" TopLeft="@seriesData.LeftRadius" BottomRight="@seriesData.RightRadius" TopRight="@seriesData.RightRadius" />

                <ChartMarker >

                    <ChartDataLabel Visible="true" Name="Label" Position="Syncfusion.Blazor.Charts.LabelPosition.Middle">

                        <ChartDataLabelFont Color="#ffffff"></ChartDataLabelFont>

                    </ChartDataLabel>

                </ChartMarker>

            </ChartSeries>

    }

[Durga Gopalakrishnan]

Samo,

By default, the chart is rendered with a height of 450px. When the chart title wraps into multiple lines, the remaining space is allocated for the chart area, reducing its size. This is the expected behavior.

To increase the width of the bars, you can adjust the ColumnWidth property, which accepts values ranging from 0 to 1. We have attached a modified sample and screenshot for your reference.

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

Please let us know if you have any concerns.

[Samo]

Thanks for reply.   I did not solve the problem. Can you check the attached link where my problem is shown.

https://we.tl/t-MJGmimGlgT

Do you have any idea how to solve the problem? Thanks in advance.

[Durga Gopalakrishnan]

Samo,

The column width for data point is calculated based on the height of the chart. When the chart title is displayed across multiple lines, the chart's height is automatically reduced, which in turn decreases the column width.

As of now, we don’t have support to maintain same column width for all data points. We have already logged a feature request on this. Based on other logged tasks priority, this feature will be available in any of our upcoming releases. You can keep track of the feature from below feedback link.

  

Feedback Link : https://www.syncfusion.com/feedback/50761/pixel-support-for-chart-column-width

If you have any more specification/precise replication procedure or a scenario to be tested, you can add it as a comment in the portal.