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

Question

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

Answer 1

You'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:
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.