score:5
i encountered the same problem, and found this solution via highcharts support forum : http://highcharts.uservoice.com/forums/55896-general/suggestions/3073133-pie-title
the highcharts dude has written a plugin that you can see working on the following jsfiddle : http://jsfiddle.net/highcharts/tnsra/
i have copy-pasted this plugin in a highcharts-plugins.js file that i included in my website, works like a charm!
here's the plugin code :
/**
* pie title plugin
* last revision: 2012-12-21
*/
(function (highcharts) {
highcharts.wrap(highcharts.seriestypes.pie.prototype, 'render', function (proceed) {
var chart = this.chart,
center = this.center || (this.yaxis && this.yaxis.center),
titleoption = this.options.title,
box;
proceed.call(this);
if (center && titleoption) {
box = {
x: chart.plotleft + center[0] - 0.5 * center[2],
y: chart.plottop + center[1] - 0.5 * center[2],
width: center[2],
height: center[2]
};
if (!this.title) {
this.title = this.chart.renderer.label(titleoption.text)
.css(titleoption.style)
.add()
.align(titleoption, null, box);
} else {
this.title.align(titleoption, null, box);
}
}
});
}(highcharts));
and this is how you configure your title (put this in your series elements) :
title: {
// align: 'left',
// x: 0
// style: { color: xxx, fontstyle: etc }
text: '<b>pie 1</b><br>subtext',
verticalalign: 'top',
y: -40
},
score:1
you can use renderer which allows to add text in any place.
score:1
improving on vincent's answer. this is how i used it for simple text titles.
extendhighcharts = function(){
highcharts.wrap(highcharts.seriestypes.pie.prototype, 'render', function (proceed) {
//clear the title if added previously
//if your chart data does not change, this reference storage for removal can be left out
if(this.chart.subcharttitleelement){
this.chart.subcharttitleelement[this.id].destroy();
}
proceed.call(this);
if (this.center && this.options.title) {
//first, add the title, at center or anywhere, we need the container width to center it
this.chart.subcharttitleelement[this.id] = this.chart.renderer.text(this.options.title.text,this.center[0],this.center[1]);
this.chart.subcharttitleelement[this.id].css(this.options.title.style)
this.chart.subcharttitleelement[this.id].add();
//center the title using the container(bounding box = bbox) width
var xcenter = this.chart.plotleft + this.center[0] - (this.chart.subcharttitleelement[this.id].getbbox().width/2),
ycenter = this.chart.plottop + this.center[1] - 0.6 * this.center[2];
this.chart.subcharttitleelement[this.id].attr(
{
x:xcenter,
y:ycenter
}
);
}
});
}
usage
this.chart.addseries({
type: 'pie',
name: 'pie_chart_1',
data: piechartdata,
center: ['80%','25%'],
size: '35%',
showinlegend: false,
datalabels: {
enabled: false
},
//this part adds the relevant information
title: {
text:'pie chart title',
verticalalign: 'top',
y: -40
},
id:'a_unique_id_or_name'
});
score:2
to further improve on this, the code below correctly handles left, center, and right justification for the titles. see fiddle at http://jsfiddle.net/9y4lj4yr/ for an example.
/**
* pie title plugin
* last revision: 2015-5-20
*/
(function (highcharts) {
highcharts.wrap(highcharts.seriestypes.pie.prototype, 'render', function (proceed) {
var chart = this.chart,
center = this.center || (this.yaxis && this.yaxis.center),
titleoption = this.options.title,
box;
proceed.call(this);
if (center && titleoption) {
box = {
x: chart.plotleft + center[0] - 0.5 * center[2],
y: chart.plottop + center[1] - 0.5 * center[2],
width: center[2],
height: center[2]
};
if (!this.title) {
this.title = this.chart.renderer.label(titleoption.text)
.css(titleoption.style)
.add()
}
var labelbbox = this.title.getbbox();
if (titleoption.align == "center")
box.x -= labelbbox.width/2;
else if (titleoption.align == "right")
box.x -= labelbbox.width;
this.title.align(titleoption, null, box);
}
});
} (highcharts));
Source: stackoverflow.com
Related Query
- highcharts - chart names for multiple pie chart series in one chart
- Highcharts - where to place style and changing style for one wedge in a pie chart
- highcharts change chart type using dropdown for multiple series
- Highcharts display label for pie chart using html table as data source
- Highcharts drilldown to pie chart - Clicking on axis label with multiple series causes pie charts to overlap
- Highcharts backgroundColor for multiple charts is only applied to one chart
- how to give different names on tooltip for one series in highcharts R
- Create multiple Pie Highcharts for multiple series
- Highcharts multiple pie chart series hover
- HighCharts Pie Chart - Displaying multiple series values in Tooltip
- Highcharts datalables enabled for one series and one point on the chart via chart function
- Showing multiple lines for one series in Highcharts
- Highcharts data from Google spreadsheet show line chart for one series
- Highcharts not displaying data labels for Pie chart in arabic
- Highcharts Custom tooltips for multiple series
- HighCharts - Pie chart drilldown for multilevel (3 to 4 level)
- highcharts pie chart multiple sections selection
- Highcharts not displaying series data for graph with multiple Y-axes
- Highcharts - Display legend for Pie chart in two columns
- Change chart type and redraw with multiple series in Highcharts
- Multiple timelines on one chart in highcharts
- Highcharts - In area chart how to use gradient color for multiple series?
- How to use Highcharts React to create chart with multiple lines for same XAxis?
- highcharts pie chart color for dynamic data
- Highcharts cannot reload multiple series chart
- Multiple Highcharts in one page - only one chart displays
- Highcharts Modify Tooltip for One Series
- Highcharts series showing different data for 'column' and 'line' chart
- How to set column width for columnRange chart with multiple series
- Why does my addSeries (in highcharts) only display names of the series but not the actual pie chart itself
More Query from same tag
- Is it possible to completely hide a tooltip using pointFormatter?
- ES6 avoid that/self
- Highcharts - How can I remove starting and ending padding from area chart
- Adding a colored border (not shadow) to the label text on a Highcharts treemap
- apply new theme without reloading the charts in highcharts
- Highchat yaxis offset property moves grid lines as well
- logarithmic chart with 0 values
- How to zoom chart line same as legend hover and reset automatically on button click in highcharts?
- Returning JSON file with cURL to use data in a HighCharts stock chart
- Highcharts yaxis max
- High traffic solution for simple data graph website
- How to display values on line stacked columns on highcharts
- Highchart: Can I use a different variable as the data labels?
- Higcharts: how to render background text over the chart, when there are plotBand with different colors?
- How to avoid overlapping of dataLabels in highchart pie chart?
- Highcharts polar spider with Min and Max for each y-axis
- Highcharts align data label based on positive / negative value
- Draw polygons with highcharts
- Connect limit's series in Highcharts
- How to wrap this behavior in a plugin?
- Highcharts line chart not loading data
- Highchart Display Marker on Top Position
- How do I increase the clickable area of a point in Highcharts so that whenever the point is 'active' a click can be recorded?
- Bar chart data label and bar custom css with bar background,Highchart
- Highcharts Solid Gauge Legend Symbol
- highcharts : issue in plotting 2 graphs in 1 chart
- Superimpose charts in highcharts
- jquery chart should show ticks labels without data
- HighCharts tooltip while dragging
- jQuery traversal to build array vs extra html output