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
Related
I'd like to get some datalabels showing inside segments of a doughnut chart where there is suitable space to do so.
I know I can use negative distance values on the the data labels config options, but I wonder how I can achieve this dynamically based on the values\size of the segments.
Is such a technique achievable? Can I have a mix of data labels outside of the segments connected with lines (connectors) and others inside the actual segments?
My starting point so far based off the official highcharts example pie chart code: https://jsfiddle.net/parky12/tbnjypse/1/
You can for example use chart.load event and change distance, x or y properties for an individual point. For example:
events: {
load: function() {
this.series[0].points.forEach(point => {
if (point.y > 5) {
point.update({
dataLabels: {
distance: -50
}
// avoid redraw after each update
}, false);
}
});
this.redraw();
}
}
Live demo: https://jsfiddle.net/BlackLabel/Lco29fdj/
API Reference: https://api.highcharts.com/class-reference/Highcharts.Point#update
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 have a population pyramid using the rCharts-highChart library implementation presented in here. I am trying to add a layer of bubble chart over the population pyramid. I have partial success in implementing it. The image below shows the chart I achieved.
enter image description here
I am not able to control some attributes of the bubble chart. I want datalabels to be displayed on the the bubble chart. However, the dataLabels are activated for the bar chart only. I want the dataLabels to be displayed on the bubble chart also. The code I use is below.
n1 <- hPlot(x = 'Agec',
y = 'Category',
type = 'bar',
group = 'HbA1c_levels',
plotBorderWidth = 1,
data = MyD.melt)
# Adding a series of bubble chart
n1$series(type = 'bubble',
data = (as.numeric(as.character(MyD$low)))
n1$series(type = 'bubble',
data = (as.numeric(as.character(MyD$high))))
n1$plotOptions(series = list(stacking = 'normal', pointPadding = 0, borderWidth = 0, dataLabels = list(enabled = TRUE)))
#dataLabels gets activated only for bar chart as shown in the figure
Further, the bubblechart is able to read the 'Y axis' when I specify a particular column from the dataframe as shown in the above code. I would want it to read the "X,Y,Z,name" attributes from a list or dataframe and then plot the bubbles. Any idea how it can be done?
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.
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 ?