Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
762 views
in Technique[技术] by (71.8m points)

svg - Place text in center of pie chart - Highcharts

I would like to place a title in the center of a pie/donut chart in HighCharts.

I don't see anything in the chart options that would directly enable this, so I'm thinking it requires using the Highcharts SVG renderer -- chart.renderer.text('My Text', x, y).

I have that set up but I can't get the text to be centered inside the pie. Percentages don't seem to be accepted for x and y values. Is there a programmatic way to get it centered inside the plot, and to survive container resizing?

Update: Setting x and y to 50% works fine to center a circle (using renderer.circle(x, y, radius))—but not to center text (using renderer.text(text, x, y)).

See result here: http://jsfiddle.net/supertrue/e2qpa/

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Answer

0 votes
by (71.8m points)

Use this code to center chart title vertically:

title: {
    verticalAlign: 'middle',
    floating: true
}

Example

Donut chart with title in the center

Edit

Since version 2.1 The floating property can be omitted as the documentation states it is implied by the presence of the verticalAlign property

When a value is given, the title behaves as floating.


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...