How to make the label appear in gantt chart even if the area is small

Ref this screenshot of Gantt Chart in Slate, when the bar is small the label 1 is not visible, How to make the label small dynamically so that it fits within the bar area instead of becoming blank value.

css code or html code to make the label 1 appear in the available space

Question originally asked by Asher on Stack Overflow: palantir foundry - How to make the label appear in gantt chart even if the area is small - Stack Overflow

ou’re correct in highlighting that the whole label element is removed from the dom when the chart is too small. This is due to how the underlying plotting library, Plottable.js, currently works + how it’s used to implement the gantt chart in Slate (if interested, see this file for a decent entry point into the code). I don’t see any way of solving the issue with the native Slate gantt chart apart from making it wider.

Here are some alternatives and workarounds:

  1. Enable pan and zoom on the gantt chart so users can at least zoom in to see the label. See this gif for what that looks like: zooming into the Slate gantt chart
  2. Load an external Javascript library for gantt charts and use Slate’s Code Sandbox to use it in your application
  3. Use Slate’s HTML text widget and a Slate Function to generate HTML/CSS for a static gantt chart. This would essentially look like passing in your data to the function and generating an HTML string that is displayed in the HTML text widget. To get a basic gantt chart this should be very doable, but to have any level of interactivity you’ll probably be better off with option #2.

I am having click function on the chart data point so ,its easy out of the box with slate, but if i use code sandbox, i want to be able to select the data point and show detailed view in a pop up container. How to do that in code sandbox ? & which charting libraries you recommend ?


Jul 13, 2023 at 9:11

  • Unfortunately, I’m not very familiar with what the charting library options would be. I would search for a gantt-chart-specific library written in vanilla JS. Since you mention that you’d like a pop-up, which will presumably extend beyond the bounds of the chart since it’s fairly small, you may run into another issue. I’m not 100% sure, but I think the code sandbox widget sticks your code in an iframe, and if that’s the case I don’t know how you would have a pop-up extend beyond the bounds of the iframe.


Jul 13, 2023 at 14:44

  • I was thinking about this a bit more and, with the caveat that I don’t know your full situation, what I might do in your situation is render a regular gantt chart but cover it with an absolutely positioned text html widget. I would rig it up so that when a user goes to click on the gantt chart (which would not be clickable since it’s covered by the invisible text html element), a “full-screen” pop-up would appear with a larger gantt chart (so all labels are visible). That’s probably a different UX than you were going for originally, but with Slate we all have to be creative sometimes :slight_smile:


Jul 13, 2023 at 14:55

  • The absolute position might not work as now the chart is inside a flex div for responsiveness and how can i position something absolute or fixed inside a div with a chart that moves along with the chart so the responsiveness is maintained


Jul 14, 2023 at 3:47

Answer & comments originally provided by Ontologize on Stack Overflow: palantir foundry - How to make the label appear in gantt chart even if the area is small - Stack Overflow