[REACT] Timeline Histogram

[frazatec]

Hi Bryntum team,

I’m working with TimelineHistogram and I’m trying to reproduce a layout where each histogram cell contains:

the histogram (bars + outline) in the upper part
a small info section below with values like:
Capacity
Load
Evidence

I’ve attached an image to better explain the expected result.

My current approach is:

using getBarDOMConfig to shrink the bar area and leave space below;
injecting custom SVG <text> elements under each bar after render.

However, we are not getting acceptable results. In particular:

positioning is not always precise (due to SVG scaling / transforms);
labels can become misaligned on zoom or resize;
re-rendering (scroll, resize, data updates) makes the solution fragile;
overall it feels like a workaround rather than a proper extension point.

Before continuing in this direction, I’d like to ask:

What would you recommend as the correct approach for this use case?

Specifically:

is there a built-in way to render custom content under each histogram bar?
is getBarDOMConfig the right extension point for this?
is manipulating the SVG after render considered safe/supported?
is there a lifecycle hook/event we should rely on for stable rendering?

Additionally, this seems like a fairly common visualization need.
Would it be possible to introduce official hooks or extension points (e.g. a renderer for per-bar labels or a dedicated “footer area” inside histogram cells) to support this use case more robustly?

Any guidance or suggestions would be greatly appreciated, since our current solution does not feel reliable enough.

Thanks!

[tasnim]

Answers to your specific questions

Is there a built-in way to render custom content under each bar?

Yes — type: 'text' series combined with getBarText / getBarTextDOMConfig is exactly the extension point for this. No SVG post-processing needed.

Is getBarDOMConfig the right extension point?

Yes, for bar rects. Use getOutlineDOMConfig for the outline path.

Is manipulating SVG after render safe?

No. The shared canvas SVG is fully rebuilt by a single DomSync pass on every scroll, zoom, resize or data change. Any manually injected elements will be silently discarded at the next sync.

Is there a stable lifecycle hook for re-rendering?

You don't need one with this approach. The text series callbacks (getBarText, getBarTextDOMConfig) run inside the normal render pipeline on every paint cycle.

I've tried making a similar demo for you, following the image you shared
Please check the Codepen here https://codepen.io/dv-auntik/pen/raWVgPr?editors=0010

Screenshot 2026-05-05 103012.png (184.95 KiB) Viewed 1127 times

[frazatec]

i Tasnim,

the example was very helpful, thanks a lot!

This clarifies the correct approach and confirms we should move away from the SVG post-processing we were attempting. We’ll proceed using the text series with getBarText / getBarTextDOMConfig.

Appreciate the clear explanation and the demo