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.
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:
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:
Load an external Javascript library for gantt charts and use Slate’s Code Sandbox to use it in your application
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 ?
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.
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
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
