I've come across a weird glitch with Highcharts export (to PNG, SVG etc). Essentially, when exporting, the datalabels on the chart become garbled, so that they duplicate like so:
I've tried changing the export image dimensions (even to match the original div size exactly) but I still have the same issue. The only thing I can think that might be affecting it is a custom formatter function (which shows the percentage after the total for each data point), but there's no manipulation of text size or anything. Any ideas?
This looks like a new problem in the export service.
I was able to work around it by disabling text shadows on the data labels. To do this, I added:
dataLabels: {
style: {
textShadow: ''
}
}
This is what worked for me. I disabled the textShadow inside the series
series: [
{
name:'Serie1',
data:[2027.15, 2027.15, 0.0],
dataLabels:{
enabled: true,
style: {textShadow: 'none'
}
}
]
I'm using Chart.js pie chart with tooltips which being cut for some reason.
Screenshot attached, didn't found any attribute/option to take care of it..
Is there anyway to take care of it?
Thanks!
This improper cutoff was raised as issue#622 in the Github repository for ChartJS.
This was determined to be a bug (evidently this bug hasn't yet been fixed)
https://github.com/nnnick/Chart.js/issues/622
In response to that issue, Robert Turrall has a solution which he says is a good workaround. Here is his proposed fix:
I'm sure that this is due to the fact that the tooltips are generated
within the confines of the canvas, making it difficult to fix.
I had the same issue on my doughnut chart and solved it by
implementing custom tooltips as per the example on the samples folder
- worked in conjunction with my existing tooltip fontsize and template settings in the chart initialisation code:
var myDoughnutChart = new Chart(donut).Doughnut(donutdata, {
tooltipFontSize: 10,
tooltipTemplate: "<%if (label){%><%=label%>: <%}%><%= value %>hrs",
percentageInnerCutout : 70
});
Check out samples/pie-customTooltips.html for the custom tooltip code.
Copy/paste and it worked straight away. Very happy!
Tooltip displayed well outside the bounds of the canvas:
PS: there's a line chart example too, which I'm guessing will work
fine with bar charts.
You can add internal padding to the chart. For instance in my case I had a cut of tooltips on the right.
options: {
responsive: true,
maintainAspectRatio: false,
cutoutPercentage: 60,
legend: {
display: false
},
animation: {
animateRotate: false
},
layout: {
padding: {
right: 40
}
}
}
I found a workaround for this. I have blank labels on my x axis, so I just added a label with several spaces in it for the last label entry. That caused ChartJS to leave enough space for the label to fit, which also leaves enough room for the tooltip to fit.
In addition, I have large circles for my data points and the last one on the right was getting clipped before. Adding the extra space to the label also fixed that.
Here is the code where I create my labels. The ratings is my actual data defined earlier:
// Add blank labels and "Today"
for (i=0; i<ratings.length; i++) {
labels.push("");
}
labels[ratings.length-1] = " ";
var data = {
labels: labels,
datasets: [
{
label: "Progress",
strokeColor: "rgba(255,165,0,1.0)",
pointColor: "white",
pointStrokeColor: "rgba(255,165,0,1.0)",
pointHighlightStroke: "#B87700",
data: ratings
}
]
};
Even if you have actual labels on your graph, you could add spaces to your last label to make it bigger. If you are centering your label, you could add the same amount of space before and after.
Obviously there will be limits where this will or won't work for you, but for my case I added 7 spaces and all looks good now.
Also, my case had an issue on the right side, whereas this question has an issue with the left side. The same fix should work, but putting the space on the first label.
It seems like Chart.js can't figure out which direction to show the tooltip because it can't detect the size of the tooltip element when it extends beyond the canvas.
In my scenario I fixed it by squeezing the text inside this particular tooltip closer with these options for the tooltip options object:
tooltips.titleMarginBottom = 1;
tooltips.bodySpacing = 1;
tooltips.yPadding = 2;
Wierdly enough Chart.js then correctly decides to show the tooltip to the left of the mouse and not below.
Would be cool if you could choose which direction the tooltip appears compared to the mouse.
In my case, I was able to work around this issue by reducing the amount of text in the tooltip. I did so using custom tooltip callbacks to specify the label text. My initialization looked like this:
var chart = new Chart(canvas.getContext("2d"), {
type: 'line',
data: chartData,
options: {
responsive: true,
tooltips: {
callbacks: {
title: function(tooltipItems, data) {
return tooltipItems[0].xLabel;
},
label: function(tooltipItems, data) {
return tooltipItems.yLabel;
},
}
},
},
});
There appears to be a fix available that hasn't yet been merged into the project: https://github.com/chartjs/Chart.js/pull/1064
Interestingly, by the setting the tooltipCaretSize option to 0 solves the issue.
{ tooltipCaretSize: 0, ... }
I want to remove the "glow" from around those circles. Those paths you see are the glows themselves, not the marker with the 2px red and blue solid rings. So, remove those path elements.
There should be a setting in highcharts that allows me to disable/modify this "glow."
These elements are not rendered immediately when the chart is rendered. They are rendered when you start interacting with the chart, which means selecting them and removing them manually doesn't seem to work.
Thoughts?
You can set the size of the halo hover effect with plotOptions, for example (JSFiddle demo):
plotOptions: {
series: {
states: {
hover: {
enabled: true,
halo: {
size: 0
}
}
}
}
}
There are some other options to customize the hover effect and the halo itself. See the documentation here. If you don't want the series to show any hover effect either you can just set enabled: false.
I'd like to draw custom bars with rounded corners to get lozenge shaped bars. There's also a requirement to overlay icons on or near some bars.
How can I override or access the rendering code for bars?
Unfortunately this opption is not avaiable in highcharts, but you can request your suggestions in our uservoice system http://highcharts.uservoice.com
Unless I am missing something, you don't need to over ride any rendering:
http://jsfiddle.net/jlbriggs/nHGRr/3/
plotOptions:{
series: {
borderRadius:10
}
},
You can also do this.
Include the following plugin.
plotOptions:{
series: {
borderRadiusTopLeft: 5,
borderRadiusTopRight: 5
}
}
Thanks in advance for your time and help.
I'm using highcharts and need to set the background color of only the x and y axis. See attached:
So what I need is to set a background color on the x-axis that is different from the dark gray of the graph (right now they are obviously the same)
Does anyone know if this is possible and, if so, how to go about it? I've been through the highcharts API Highstock API extensively, but couldn't find anything specifically for this.
Thank you again for your time and help!
Rich
Did you try:
rendered a rectangle and positioned it to the bottom of the graph.
chart.renderer.rect(0/*position on X-axis*/, 275/*position on Y-axis*/, 680/*width*/ , 25/*height*/, 00)
.attr({
'stroke-width': 0,
stroke: '#888888',
fill: '#888888',
zIndex: 3
})
.add();
Read more: highchart renderer
x-asis does not have backgroundColor Set background color to HighChart xAxis labels
Hope this help.