Highcharts - chart names for multiple pie charts in one chart

Question

I need to display several pie charts that are associated with the same data. Therefore, I want all of them to be part of the same diagram and implement them as separate series.

All this does not work until I tried to put tags / headers in each individual pie chart. It seems that I can only have a title over the whole group. See jsfiddle

Is there a way to have headings above each chart?

See above jsfiddle for example 

Answer 1

I ran into the same problem and found this solution on a forum with highcharts support: http://highcharts.uservoice.com/forums/55896-general/suggestions/3073133-pie-title

The Highcharts pilot wrote a plugin that you can see while working on the following jsfiddle: http://jsfiddle.net/highcharts/tnSRA/

I have copied this plugin in the highcharts-plugins.js file that I have included in my site, it works like a charm!

Here is 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 customize 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 }, 

Answer 2

You can use the visualization tool, which allows you to add text anywhere.

http://api.highcharts.com/highcharts#Renderer.text ()

Answer 3

Improving Vincent's Response. This is how I used it for simple text headers.

 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 } ); } }); } 

USING

  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' }); 

Answer 4

To further improve this code, the left, central and legal justification of the names is correctly processed below. See the script 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));