Pie Chart Title gets cut off if too long

[youngcitrus]

Description

When the title of the pie chart is too long, the title is cropped.
Our use case involves some Generative AI to create the title and data that feeds to the charts and in some cases the titles can be lengthy.

It appears that SVG elements don't support text-wrapping or line breaks, but it would be awesome if Mermaid could handle splitting longer titles into multiple elements and adding them to the svg. For now one workaround is using CSS to make the font-size smaller, but that doesn't guarantee no title crop in the case of even lengthier titles.

Could you please provide a fix or alternative solution for this?

Steps to reproduce

Create a pie chart
Give it a long title.

Sample mermaid code in live editor:
pie title Types of industry trends in the last 12 months

Result:
Pie chart title is cropped

Expected:
Title is not cropped

Screenshots

Code Sample

pie title Types of industry trends in the last 12 months

Setup

• Mermaid version: 11
• Browser and Version: [Chrome, Edge, Firefox] Chrome: 131.0.6778.265 (Official Build) (arm64)

Suggested Solutions

No response

Additional Context

No response

[nourhenta]

hello @youngcitrus,

Problem
When the title of the pie chart is too long, it gets cropped, as SVG elements do not inherently support text wrapping. This issue arises in scenarios where dynamic titles, such as those generated by AI or user inputs, are too lengthy to fit within the available space of the pie chart visualization.

Solution
The solution dynamically adjusts the font size of the pie chart title to fit within the available space without cropping. The approach ensures a minimum font size (8px) while shrinking the text size until it fits within the width of the pie chart.

Implementation Details
Dynamic Font Adjustment:

Implemented a loop to reduce the font size if the rendered title width exceeds the available chart width minus margins.
Ensured the font size does not fall below a defined minimum size for readability.
Tested Changes:

Used a long title: "Types of industry trends in the last 12 months".
Verified that the title dynamically adjusted its size to fit without being cropped.

Code Location:

File: packages/mermaid/src/diagrams/pie/pieRenderer.ts
Method: draw()

The pull request addressing this issue has been created: #6242.

Let me know if you have any feedback or suggestions regarding the changes. Thank you!

[youngcitrus]

@nourhenta Thank you for the quick response! Based on the PR, it looks like the font size of the label will be set between 16px and 8px, unless I'm misunderstanding?

Previously, I believe the default font size was 25px. In terms of design, I think a larger font size would look better (as long as it's not cut off) to emphasize the title more than the legend. Are there any cons of starting with a larger font size (closer to the codebase's previous 25px value) before running the loop? In the screenshot you shared above, it looks like the font could be a bit larger before reaching the cutoff edges (just a thought, and hard to tell since I can't visualize the MARGIN distance)

Thank you!

[nourhenta]

Hi @youngcitrus ,

Thank you for your feedback! You are correct that the current implementation sets the font size between 16px and 8px. I chose these values to ensure that the title fits within the available space without overflowing, but I understand your point about maintaining a larger initial font size for better emphasis.

I agree that starting with a larger initial font size closer to the original 25px would enhance the visual hierarchy and align more closely with the codebase's previous design. I'll update the code to:

• Start with a default font size of 25px.
• Reduce it dynamically only if it exceeds the available width (still adhering to the minimum font size of 8px for readability).

Additionally, I'll revalidate the title's size with the MARGIN distance to ensure it doesn't reach the cutoff edges.

Thank you for bringing this up—I’ll make the necessary adjustments and push the updates shortly.

Best regards,
Nourhenta

[nourhenta]

Hi @youngcitrus,

I've implemented the changes based on your suggestion:

• The title now starts with a default font size of 25px.
• It dynamically adjusts downwards only if the title exceeds the available width, with a minimum size of 8px.
• The MARGIN distance has been accounted for to ensure the title doesn't reach the cutoff edges.

Here is the updated screenshot for your reference:

For this particular screenshot, the font size has adjusted to 19px because the title is quite long. This prevents the title from being cropped. However, for shorter titles, the font size remains at the initial 25px.

Thank you again for the helpful feedback—please let me know if there are any further adjustments you'd like to see!

Best regards,
Nourhenta

[youngcitrus]

@nourhenta Thank you for the responsiveness! Screenshot and changes look great. Looking forward to seeing this live. I'll be sure to bring up anything else if it comes to mind. Thank you again!