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>
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 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.
I'm using Highcharts to generate a heatmap grid with around 10k grid cells. The heatmap renders in under a second without dataLabels. However if I enable dataLabels, which are necessary for my project, the same heatmap takes 10 seconds to render. I tried setting useHTML to true, and that renders in 30+ seconds. I'm not doing any work within the dataLabel rendering. Is there any way to speed this up?
The example with 10k cells in the heatmap with enabled data labels is here.
Highcharts.chart('container', {
chart: {
type: 'heatmap'
},
xAxis: {
min: 0,
max: 99
},
series: [{
data: data,
dataLabels: {
enabled: true
}
}]
});
No-opt rendering time: 33.5 s
From the profiler I can say thet there are two good candidates for optimization.
Rendering with overlapping labels: 10.4 s
dataLabels: {
enabled: true,
allowOverlap: true
}
No textOutline: 8.56 s
dataLabels: {
enabled: true,
allowOverlap: true,
shadow: false,
style: {
textOutline: null,
color: 'black'
}
},
The other candidate is about setting zIndex for the data labels, I cannot see how to optimize it without changing internal Highcharts method responsible for drawing data labels. You can wrap drawDataLabels method and remove the part for setting label's zIndex.
Without zIndex: 1.62 s
attr = {
//align: align,
fill: options.backgroundColor,
stroke: options.borderColor,
'stroke-width': options.borderWidth,
r: options.borderRadius || 0,
rotation: rotation,
padding: options.padding
// zIndex: 1 /* commenting this part gives a few good seconds */
};
full example: http://jsfiddle.net/dddqrb9f/1/
I commented only one line in the function but you can remove additional features if you don't need them - e.g. if you don't need labels, you can render text only.
if (!dataLabel) {
dataLabel = point.dataLabel = renderer['text']
Text instead of labels: 0.864 s
example: http://jsfiddle.net/dddqrb9f/2/
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