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.
Related
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 the following barchart for which I'm trying to turn the hover tooltip off:
= bar_chart [["", current_admin.company.progress_to_target_this_month]], colors: [current_admin.company.progress_bar_colour]
From their homepage, I can make an initializer file which I've done:
config/initializers/chartkick.rb
Chartkick.options = {
height: '300px',
colors: ['#b00', '#666'],
discrete: true,
library: {
pointSize: 0,
vAxis: {
points: false,
legend: false,
discrete: true
},
hAxis: {
points: false,
legend: false,
discrete: true,
textPosition: 'none'
},
tooltips: {
enabled: false
}
},
options: {
tooltips: {
enabled: false
}
},
tooltips: {
enabled: false
}
}
The options regarding vaxis and haxis all work, however I can't get anything to do with tooltips working. I've tried every variety of inserting tooltips: { enabled: false } that I can think of with no joy.
If anyone has any advise it would be greatly appreciated
As of summer 2017 custom tooltips are not supported in chartkick.js. There are two open issues about this on the GitHub repository:
Add support for custom tooltips #86
Piechart with chart.js custom tooltips #85
If you don't need any other pointer-events for the chart, then you can just set pointer-events: none for the div, which contains the chart.
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/
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
Please take a look at this fiddle from highcharts stackLabels example.
Once you disable a series in the legend, stackLabels are updated but still shows the old total values as well. I guess a correct behavior should be showing only the values (sum) of enabled series. Is this a bug?
yAxis: {
stackLabels: {
enabled: true
}
},
plotOptions: {
column:{
stacking: 'normal',
dataLabels: {
enabled: false,
}
}
},
Yes, this is a bug, but already resolved on master branch, see: http://jsfiddle.net/hLLjj/
<script src="http://github.highcharts.com/master/highcharts.js"></script>