Highcharts: shortcuts inside the bar

Question

I am using the columnrange type from Highcharts-more. The default data label latch places min / max data at both ends of the range, which is nice.

Is there a way to snap a different label to each point? (for example: data name, right in the middle of the panel)

Please see my work at: JSFiddle

This is a family tree with ranges of life. I would like to display the names shown in the tooltips in the center of the bars.

(FYI) I tried to overload the chart with text using the renderer: it worked ... but the texts were tied to the chart, not the points, and scaling left them in place while the points moved. is there a way to attach text labels to every point on the onLoad diagram?)

Thanks.

$(function () { $('#container').highcharts({ chart: { type: 'columnrange', inverted: true, marginLeft: 40, zoomType: 'xy' }, title: { text: 'My family tree' }, xAxis: { labels: { enabled: false }, min: 0, max: 10 }, yAxis: { type: 'datetime', min: new Date().setYear(1900).valueOf(), max: new Date().valueOf(), title: { text: 'Year' }, endOnTick: false }, legend: { enabled: false }, plotOptions: { columnrange: { grouping: false, pointPadding: 0, dataLabels: { enabled: true, useHTML: true, formatter: function () { if (new Date().setHours(0, 0, 0, 0) !== new Date(this.y).setHours(0, 0, 0, 0)) return '<span style="color:black">' + Highcharts.dateFormat('%Y', this.y) + '</span>'; else return ''; } } } }, tooltip: { headerFormat: '{series.name}<br/>', formatter: function () { var l = this.point.name + '<br/>' + Highcharts.dateFormat('%e/%m/%Y', this.point.low); if (new Date().setHours(0, 0, 0, 0) !== new Date(this.point.high).setHours(0, 0, 0, 0)) l += '<br/>' + Highcharts.dateFormat('%e/%m/%Y', this.point.high); return l; } }, series: [{ color: 'rgb(100,100,255)', pointWidth: 150, data: [{ name: 'Yann B', low: Date.UTC(1976, 1, 27), high: new Date().valueOf(), x: 1 * 10 / 2 }] }, { color: 'rgb(150,150,255)', pointWidth: 70, data: [{ name: 'Jean-Yves B', low: Date.UTC(1947, 3, 26), high: Date.UTC(2006, 2, 10), x: 1 * 10 / 4 }, { name: 'Josiane M', low: Date.UTC(1946, 8, 21), high: Date.UTC(1998, 11, 26), x: 3 * 10 / 4 }] }, { color: 'rgb(200,200,255)', pointWidth: 30, data: [{ name: 'Guillaume B', low: Date.UTC(1907, 7, 4), high: Date.UTC(1988, 1, 11), x: 1 * 10 / 8 }, { name: 'Marie-Jeanne S', low: Date.UTC(1911, 7, 17), high: Date.UTC(1986, 2, 3), x: 3 * 10 / 8 }, { name: 'Joseph M', low: Date.UTC(1921, 3, 11), high: Date.UTC(1996, 4, 23), x: 5 * 10 / 8 }, { name: 'Marie K', low: Date.UTC(1925, 4, 4), high: new Date().valueOf(), x: 7 * 10 / 8 }] }] }); }); 

Answer 1

Using "intrinsic" decency really matters here. But I had to get around the error inherent in its use (see Commentary on the last answer).

Here is a code snippet that works for datalabels. The problem with zIndex is still related to tool tips, and I will try to publish a more complete solution in the near future. http://jsfiddle.net/SineDie/TREwr/1/

 dataLabels: { inside: true, enabled: true, useHTML: true, formatter: function () { if (this.y === this.point.low) { var l = '<div style="text-align:center;color:black;width:' + (this.point.plotLow - this.point.plotHigh) + 'px">' + Highcharts.dateFormat('%Y', this.point.low) + ' - ' + this.point.name; // to avoid marking as dead if still living... if (new Date().setHours(0, 0, 0, 0) !== new Date(this.point.high).setHours(0, 0, 0, 0)) l += ' - ' + Highcharts.dateFormat('%Y', this.point.high); l += '</div>'; return l; } else return ''; } } 

Answer 2

I made some changes to the formatting function. set the datalabels inside property to true and attach the data to point high values.

 dataLabels: { inside:true, enabled: true, useHTML: true, formatter: function () { if (new Date().setHours(0, 0, 0, 0) !== new Date(this.y).setHours(0, 0, 0, 0)) { if (this.y == this.point.high){ return '<span style="color:black">' + Highcharts.dateFormat('%Y', this.y) +' - '+ this.point.name + '</span>'; } return '<span style="color:black">' + Highcharts.dateFormat('%Y', this.y) + '</span>'; } else return ''; } }