How can I show labels for each bar in Highcharts as shown in the image below?
I think the solution you are looking is some thing like this.
This canbe achieved using the datalabels and placing them properly at the position you have desired to.
plotOptions: {
column: {
dataLabels: {
enabled: true,
y: 0,
verticalAlign: 'bottom',
inside: true,
color: 'white',
formatter: function(e) {
return this.series.name
}
}
}
},
You can set overflow to 'none' and crop to false to be able to display data labels out of the area plot.
API Reference:
http://api.highcharts.com/highcharts/plotOptions.series.dataLabels.crop
http://api.highcharts.com/highcharts/plotOptions.series.dataLabels.overflow
Example:
http://jsfiddle.net/5m0kkbhf/
Related
I have a pretty busy chart that I need to clean up the overlapping datalabels on. I have tried all of the Highcharts options and previous forum answers I can find without much success. Here is my code on JSfiddle:
http://jsfiddle.net/cs4djfut/4/
plotOptions: {
column: { dataLabels: { allowOverlap: true, crop: false, overflow: 'none', enabled: true, formatter: function () { return this.series.name; } }, } },
Tried a function to change the datalabel position but it only worked on the fist datalabel.
In Highcharts Bubblechart if i two bubbles comes near one another or intersect one another, the name on top of one bubble is not displaying.
Is there a way to display both the bubble names.
In this the notice the two bubbles in top right enter code herehttp://jsfiddle.net/htb38096/
You can enable the allowOverlap property for data labels:
plotOptions: {
series: {
dataLabels: {
allowOverlap: true,
...
}
}
}
Live demo: http://jsfiddle.net/BlackLabel/k23xLjmn/
API Reference: https://api.highcharts.com/highcharts/series.bubble.dataLabels.enabled
try this on dataLabels:
dataLabels: {
enabled: true,
useHTML: true,
style: { textShadow: 'none',fontSize: '10px',color:'black' },
formatter: function() {
return this.point.name;
},
}
I have a stacked bar chart where I am applying custom borders after the chart has loaded i.e.
},function(chart){
chart.series[1].data[0].graphic.attr({'stroke':'yellow','stroke-width': 2})
chart.series[1].data[1].graphic.attr({'stroke':'yellow','stroke-width': 2})
This works fine, except for the fact that the left border stroke doesn't show the full width i.e.
These are my plotOptions:
plotOptions: {
series: {
states: {
hover: {
enabled: false
}
},
stacking: 'normal',
pointPadding: 0.1,
borderWidth: 0,
lineWidth: 0,
dataLabels: {
enabled: true,
formatter: function() { return this.series.index==0 ? "<div style='color:#000000;'>"+this.y + "</div>" : this.y ; },
useHTML: true,
connectorWidth: 1,
style: {
fontSize: "14px",
color: '#FFFFFF',
fontWeight: 'normal'
}
}
}
},
Additionally, even though I have disabled the hover effect (as you can see in the plotOptions above), when you mouse over the highlighted bar, the yellow border changes to white:
AFTER HOVERING
Any pointers to resolving either of these issues would be appreciated.
FIXED - Hover Issue
I was able to use plotOptions: {series: { enableMouseTracking :false}}} to disable all mouse interaction. This solved the hover effect of changing border back to white.
If you need to retain mouse interaction, just enable the default border color to be your highlighted one i.e. plotOptions: { bar: { borderColor: "yellow"}}
FIXED - SVG Border issue on Stacked charts
It's a bit of a hack but I used some jQuery in the post chart creation function to remove 1px from the height of the bar and add 1px to the y value, for the affected stacked bar i.e.
$(".highcharts-series:gt(0) rect").each(function(index,value) {
$(this).attr("height",$(this).attr("height")-1);
$(this).attr("y",parseInt($(this).attr("y"))+1);
This should be easy, I don't know why its not!
Trying to add a single label to for each of the series in the middle of the area.
So instead of a data label on each point, I just want one in the middle.
http://jsfiddle.net/CgAj2/
dataLabels: {
enabled: true,
align: 'center',
verticalAlign: 'bottom',
formatter: function() {return this.series.name; },
}
Any anyone help with this? I am sure its possible by manually adding as positioning labels, but this seems like a work around.
Thanks!
Not only for the entire series, you can have labels enabled for individual points also,
plotOptions:{
arearspline:{
datalabels: {
enabled: false
}
}
}
in series data:
data: [37707.0, 37031.0, {
y: 37037.0,
dataLabels: {
enabled: true,
formatter: function () {
return this.series.name;
}
}
},
37748.0,
39672.0,
41747.0],
updated your fiddle here: http://jsfiddle.net/CgAj2/1/
hope this will help you
I took a sample jsfiddle and modified it here just to show a sample of what I experienced:
http://jsfiddle.net/pMwuv/
Here is what my actual datalabel code looks like:
dataLabels: {
enabled: true,
align: 'left',
verticalAlign: 'top',
style: {
color: 'black'
},
formatter: function () {
if (this.x == 19) {
return this.y + '<br>units left';
};
}
}
What I am having on my area chart is that the last data label is cut off. Is there a way to increase the width of the container or add some type of padding so that the full label shows?
Just changing the x and y position of the label will not work for my area chart. I have my chart customized so that only the last point of the chart has a data label and i want it aligned to the right of the last point and not within the chart.
But if we can get the above sample fiddle to work then the same solution should work for me.
You can add marginRight to chart like this:
chart: {
renderTo: container,
width: 550,
marginRight: 35
}
jsFiddle.
This is not a direct solution, but I suggest you to put the label at the yAxis:
yAxis: {
title: {
text: 'Units left'
}
},
And remove the other attributes, leaving just enabled: true:
plotOptions: {
series: {
dataLabels: {
enabled: true
}
}
},
See the fiddle
You can set spacingRight and add correct value.