X axis label position when point count changes

[kirkbross]

I'm using Chartist bar chart in a ReactJS app with a date range filter to change the range.

When I switch from a 30 day view to a 7 day view, I need to keep the X axis label under the bar.

See these pics:

.ct-label.ct-horizontal { white-space: nowrap; -webkit-transform: rotate(60deg); -moz-transform: rotate(60deg); -ms-transform: rotate(60deg); -o-transform: rotate(60deg); transform: rotate(60deg); transform-origin: 15px 7px !important; height: 18px !important; width: 50px !important; }

[kirkbross]

Well... I managed to achieve my goal with a left-margin: calc(50% - 9px); but it seems like the is probably a better, native way of centering the label under the bar.

[malthe]

Are you using foreignObject or text (depends on client capability) – ?

I have a similar issue where it helps wrapping the text node in an svg node – transferring the positioning and width to the svg element and setting x="50%" along with text-anchor: middle on the text.

But I am not sure how that works with label rotation.

[Arantiryo]

Hello @kirkbross 👋

Chartist has recently been updated to version 1.0 with some new exciting changes like ESM and TypeScript support. The migration guide can be found right here.

Please let me know if the quiestion is still relevant to you so we can further look into it!