Text on Segments

[IRISHMAN04]

Is it possibe to add text overtop of a segment? Either via adding the segments "val", or by a custom formula. Boomers at my company want to screenshot the chart to display it on a powerpoint instead of using the hover functionality on the live site

[dam13n]

I'm implementing this library now (vasturiano's libraries in general are so awesome), and having text/labels on the segments would be very helpful. Hover is a nice option, but being able to visually see all the timeline data without having to mouse over everything would be so nice for my use case.

Hi there. the "features" branch in our fork of this project has added labels to the segments. The docs are up-to-date for the label and other tweaks.

https://github.com/tasketechnology/timelines-chart/tree/features

[dam13n]

@tasketechnology very cool! it's semi-working. On load, it just shows one big rect. If you zoom in (via the chart or the overview), it'll re-render properly. But there's also some odd behavior sometimes when you adjust the time span on the overview bar, sometimes rendering just a single square again or a large one in the background. Some screenshots below.

You should post the issues under https://github.com/tasketechnology/timelines-chart/tree/features not here. Hoever, I cannot guarantee any changes either as the code works fine for our purproses. Consider using the zoomX to set the initial zoom. If you submit to our fork of the project then please include a small sample of the data you use, fake names and nubmers are fine.

[dam13n]

I went to post an issue on your repo, but I don't think Issues are enabled? So I commented back over here.

I'm using the getRandomData() function provided by vasturiano in this repo, just with an added label: 'test'.

Will take a look at zoomX and appreciate your help.

Issues have been enabled. Thanks for letting us know.

[leenasalman]

This is what I did to get the text on segments

Add this after initializing your chart

setTimeout(() => {
  d3.selectAll('rect.series-segment').each(function (d: any) {
    const el = this as Element;
    const x = +(el.getAttribute('x') ?? 0);
    const y = +(el.getAttribute('y') ?? 0);
    const width = +(el.getAttribute('width') ?? 0);
    const height = +(el.getAttribute('height') ?? 0);
    d3.select(el.parentNode as Element)
      .append('text')
      .attr('x', x + width / 2)
      .attr('y', y + height / 2)
      .attr('fill', 'red')
      .attr('class', 'italic')
      // .attr('opacity', 0.7)
      .attr('dominant-baseline', 'middle')
      .text('your text here');
  });
}, 1000)

you can use 'rect.series-group' to put the text on the group instead of the segments