CODEWITHSUNDEEP
javascriptcsssvgd3.jstext-align
jlewkovich
jlewkovich

Reputation: 2775

How to center title over SVG chart with d3.js?

DEMO: http://jsfiddle.net/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.)

Upvotes: 3

Views: 8386

Answers (1)

eclipsis
eclipsis

Reputation: 1550

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

Upvotes: 5

Related Questions