I’m designing a custom Gantt chart and KPI tiles using Deneb, and I'm running into an issue where long text strings bleed out of their background bars and rectangles. Since the widths of these shapes are dynamic based on data, I need a way to ensure the text stays contained. Is there a property in Vega-Lite to automatically truncate text with an ellipsis or wrap it based on the width of the parent mark?
3 answers
To prevent text overflow in Deneb, you should leverage the limit and ellipsis properties within your text mark definition. The limit property sets the maximum pixel width the text is allowed to occupy. For dynamic shapes like bars, you can actually bind the limit to the same field or signal used for the bar's width. For example, in your encoding, add "limit": {"field": "BarWidthValue"}. To make it look professional, set "ellipsis": "..." so the text truncates gracefully. Additionally, adding "clip": true to the mark properties acts as a final safety net, ensuring that any stray pixels outside the defined bounding box are hidden from the user interface.
That works for truncation, but what if the client insists on seeing the full text? Is there a way to enable multi-line wrapping inside a mark in Vega-Lite, or are we strictly limited to single-line truncation in the current Deneb implementation
I've found that setting the align to "left" and using a small dx offset helps keep things tidy. Using limit is definitely the most "SEO-friendly" way to keep a dashboard looking clean.
I agree with Robert. I also suggest using the baseline property set to "middle" or "top" to ensure the text stays vertically centered within your bars. If you combine limit with a dynamic fontSize calculation, you can even make the text shrink slightly before it resorts to truncation, which provides a much better user experience on dense reports.
You can actually achieve multi-line wrapping by using the lineBreak property, Kimberly. If your data contains a specific character (like a pipe or a newline), you can tell the mark to break there. For truly dynamic wrapping based on width, you might need to use the width property in the text mark configuration (available in more recent Vega-Lite versions) combined with align. However, most Power BI pros find that calculating line breaks in a DAX measure before passing the string to Deneb is the most reliable way to handle complex labels without the text overlapping other visual elements.