DEMO: /

I've created a simple SVG with two axes and appended a text element to serve as the title of the chart. But I can't find a reliable way to center the title over the midpoint of the chart. I'd like the middle of the text element to be aligned over the '0.5' tick on the x-axis. To me, visually, that's the middle of the chart.

I'd like a solution that is generic, meaning it doesn't matter how long the text string is, the middle will always be over '0.5'. It also shouldn't matter what type of axis the x-axis is (whether it's linear, ordinal, etc.)

DEMO: http://jsfiddle/29j6ozqn/

I've created a simple SVG with two axes and appended a text element to serve as the title of the chart. But I can't find a reliable way to center the title over the midpoint of the chart. I'd like the middle of the text element to be aligned over the '0.5' tick on the x-axis. To me, visually, that's the middle of the chart.

I'd like a solution that is generic, meaning it doesn't matter how long the text string is, the middle will always be over '0.5'. It also shouldn't matter what type of axis the x-axis is (whether it's linear, ordinal, etc.)

• javascript
• css
• svg
• d3.js
• text-align

1 Answer 1

Use text-anchor: middle or text-align: center instead of text-anchor: start: Fiddle.