I am using Highchart pie-donut chart for a project and I'm facing issues regarding the centering of icons within different slices of the donut. I am having 3 slices within the donut chart, and for each slice particular icon (using the URL) needs to be rendered.
Here's the specific code that attaches the icon to the corresponding slice of donut.
var chartIconsUrl = {
'suitcase': 'https://s18.postimg.org/jju1bg1o9/suitcase.png',
'home': 'https://s18.postimg.org/xnrqpb9rt/home.png',
'notes': 'https://s13.postimg.org/a5r39jv8n/notes.png'
}
dataLabels : {
enabled : true,
useHTML : true,
formatter : function() {
if(this.y!=0)
return '<img src = ' + chartIconsUrl[this.key] + '><img>';
},
distance : -30
}
https://jsfiddle.net/dsharm/anva3gaz/.
Please note that icons are rendered at different positions on different browsers, in IE icons are shifted down. I have cross browser compatibility as my requirement as well.
Edit:
formatter: function(){
return '<img style="width:20px; height: 20px" src =' + chartIconsUrl[this.key] + '><img>';
}
I can't directly add the width, height, x and y to the label as I have requirement of variable slice size i.e., y values can change dynamically.
Related
I have a system with lots of highcharts which can be positioned basically anywhere on the page.
Some are very small (e.g. 50px x 50px).
I see we can set tooltip.outside : true
tooltip: {
outside: true
}
This stops the tooltip taking over the whole chart container by breaking it out of the chart and into the window.
However this can cause overflow issues with the window when you're near the edge of the page and I personally prefer a static tooltip.
I'd like to always fix the tooltip to float above the chart, top left with a bit of padding, which for my application will almost always be visible and will avoid overflow issues, e.g.;
I've looked into setting a custom positioner, however, as the "outside" tooltip is now part of the window and not relative to the chart, the positioner sets a fixed position, which isn't suitable for my application.
I'd like the tooltip to always be above the chart regardless of mouse or scroll positions.
Of course I could add a custom element and position it above the chart myself, then applying the tooltip to that, but we have a lot of charts and this seems cumbersome.
Tooltip outside Fiddle
Suggestions?
Thanks
After a bit of poking around in the highstock Tooltip.prototype.getPosition code, it turns out what I needed was this.point.chart.pointer.getChartPosition();
tooltip: {
distance: 40,
outside: true,
positioner: function () {
var point = this;
var chart = point.chart;
var chartPosition = chart.pointer.getChartPosition();
var distance = point.distance;
//Position relative to renderTo container
return {
x: chartPosition.left - distance,
y: chartPosition.top - distance - (point.options.useHTML == true ? point.label.div.offsetHeight : point.label.height)
}
//Alternatively - Position relative to chart plot (ignoring legend)
var containerScaling = chart.containerScaling;
var scaleX = function (val) {
return (containerScaling ? val * containerScaling.scaleX : val);
};
var scaleY = function (val) {
return (containerScaling ? val * containerScaling.scaleY : val);
};
return {
x: chartPosition.left - distance + scaleX(chart.plotLeft),
y: chartPosition.top - distance + scaleY(chart.plotTop) - point.label.height
}
},
},
See working fiddle.
I find it odd that this method is attached to pointer, but it's what I was after.
One thing to note, in the fiddle I use point.label.height, if useHTML:true; use point.label.div.height.
What about using the positioner callback without setting the 'outside' option? It will set the wanted position inside the chart area.
Demo: https://jsfiddle.net/BlackLabel/gabjwd2e/
API: https://api.highcharts.com/highcharts/tooltip.positioner
I've realized a drilldown of mappies (with display of mini charts when clicking on the region) and it works very well.
I have a small problem :
on the higher level, when the mouse is over the region, informations are displayed in the tooltip (and if I clic, a mini chart is displayed). If I hover the region name label, a tooltip shows 'click to drilldown'. Everything is OK on this level.
on the sublevel (when clicking on the region name from the higher level map), the map of the lower level is displayed and informations are displayed in the same way as for the upper level : mouse over the region -> informations are displayed in the tooltip (that is what I want). But when the mouse is over the name of the region, the tooltip with 'click to drilldown' is shown again and I would like that nothing appear at this level (because I can't drilldown again).
An example is here
clic on 'Auvergne-Rhône-Alpes' : the map of the french region is displayed. Now go over the label 'Ain' : I would like no tooltip to be displayed on this label (only the tooltip over the blue color around the label).
If I try to disable the tooltip, no more tooltip is displayed (nor the informations tooltip, neither 'clic to drilldown'). I want the informations tooltip continue to be displayed but not the 'clic to drilldown' at this level.
I tried to do a close behavior that I expect with this code but it fixed the position of the tooltip. I want the tooltip to continue to be displayed near the mouse cursor.
tooltip: {
useHTML: true,
pointFormat: '<span class="f32">'+level+'</span>',
positioner: function () {
var content = this.label.text.textStr;
if(content.indexOf('<span class="f32">2</span>')>0)
return { x: 0, y: -100 };
else
return { x: 0, y: 250};
}
},
Any ideas about that ?
Kind regards
I think that you should use the tooltip.formatter (not the tooltip config nested in the series config object) callback which allows setting displayed tooltip formats.
Demo: https://jsfiddle.net/BlackLabel/kg30con5/
tooltip: {
formatter() {
console.log(this)
if (this.series.mapTitle) {
var hoverVotes = this.hoverVotes; // Used by pie only
var libRegion = this.LIB_REGION;
if (libRegion == undefined) {
libRegion = this.point.properties.name;
}
return "<b>" + libRegion + "</b><br/>" +
"<hr/><b><i>Nb_Femmes : </b></i> " + unit_pre + Highcharts.numberFormat(this.point.value, mes_prec) + unit_suf +
"<br/><i>Click to display more informations</i>";
} else {
if (level === 1) {
return this.series.name
} else {
return false
}
}
}
},
API: https://api.highcharts.com/highcharts/tooltip.formatter
I have this kind of graphics : https://www.highcharts.com/demo/column-stacked-percent
My problem is that, like in the example, the tooltip lies on the top of each bar. Using the positioner property of the tooltip gives me the possibility of placing it somewhere, however the point.plotY property is always 0. I think that this comes from the fact that tooltip is shared.
I need to place the tooltip on bottom when i'm hovering the top series, because I have some information between bars hidden by the tooltip.
How can I get this point.plotY "real" value or overcome the problem ?
When you have a stacked column, you can get the hover points via this.chart.hoverPoints (this is the tooltip) and choose the point from the stacked column.
If want a specific point which is not part of the hovered column - you can access series object and its via this.chart.series[seriesIndex].data[pointIndex].
Positioner for the tooltip which appears in the bottom point:
positioner: function (w, h, p) {
const chart = this.chart
const points = chart.hoverPoints
if (points && points.length) {
const i = points.length - 1
return { x: points[i].plotX + chart.plotLeft - w / 2, y: points[i].plotY + chart.plotTop}
}
return { x: 0, y: -9e7 }
}
example: http://jsfiddle.net/8acems26/
I am building a pie chart where the labels for the data points can very greatly in length, the legend is configured to be vertical and positioned on the left side.
I have added a label element to the bottom of the chart that shows the total of all data points.
The problem I am facing is that the positioning of this label (via the style element) is based on how wide the legend is, which occasionally if the legend is wide enough will be pushed off the right side of the chart.
Does anyone know of a way that I can style this label so that is positioned based solely on the width of the entire chart.
Here is the styling applied to the label (I tried adding the position value but this didn't appear to do anything):
style: {
top: '325px',
position: 'absolute',
left: '-160px',
'font-size': '175%'
}
Here is an example of the chart that I'm working with, you can see that the value for the total has bee cut off.
EDIT:
As per Sebastian's comment I was able to effectively solve the issue by using the legend label formatter to limit the length of the series names. Here is the code:
labelFormatter: function () {
var formattedName = this.name;
if (formattedName.length > 17) {
formattedName = formattedName.substr(0, 14) + '...';
}
return formattedName;
}
Have you tried to use labelFormatter http://api.highcharts.com/highcharts#legend.labelFormatter ?
I'm using DotNet.HighCharts and am very pleased with what it enables me to do so far. However, I cannot get it to position labels on the inside of a donut / pie chart. It appears that the distance attribute is not available for the DataLabels. Does anyone have a workround?
Alternatively, does anone know how to write text onto the top of a chart at a specific position (relative to the container of course)?
It's possible to use Distance property in the DataLabels:
DataLabels = new PlotOptionsPieDataLabels
{
Formatter = "function() { return this.y > 5 ? this.point.name : null; }",
Color = Color.White,
Distance = -30
}
Also you can see how is used in the sample project. Download from here: http://dotnethighcharts.codeplex.com/releases