When I try to hover mouse along y-axis I observed that the tooltip is at the top but the point selected is at the bottom of the graph. This is because the point below might be the second point when we hover along the x-axis.
How do I make highcharts transverse points along the y-axis ?
Note: It is not a shared tooltip
I have tried setting the following attributes in the tooltip:
followPointer: true,
followTouchMove: true,
That is because of the default value of the findNearestPointBy option, which is 'x'. You can set it to 'y' or 'xy':
series: [{
findNearestPointBy: 'xy',
...
}]
Live demo: https://jsfiddle.net/BlackLabel/2nqdxp3z/
API Reference: https://api.highcharts.com/highcharts/series.line.findNearestPointBy
I am using Chart.JS and pieceLabel at the moment to display information. I find that setting Arc to true allows for me to show my data in an easier to read format however it makes all of the values on the bottom half of the doughnut chart to be 'upside down'. Is there a way to make the values be displayed in the same format as when arc is set to false?
For example my settings are:
pieceLabel: {
render: 'percentage',
precision: 1,
position: 'outside',
arc: true, // this rotates and curves the text in parallel to the circumference
overlap: true,
}
So I have my values in percentage outside of the doughnut chart but again every value faces inward and id like them to act the same as if arc was false.
Thank you
Hi all I am using high stock to visualise my data. In that plot line is hiding behind the trend.is there is any way to show the plot line above the trend. and also movement of plot line become hindrance when the chart is loaded with large data sets.
I have attached image for reference. Here plot line is hiding behind the trend.
You should use the zIndex option of plotLines to solve this problem.
yAxis: {
plotLines: [{
color: '#FF0000',
width: 2,
value: 80,
zIndex: 5
}]
}
You can see the live example in this jsFiddle.
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 am creating a chart with JQPlot. The chart will contain several series, each series with two bars. The second bar of each series should be partly covered by the first bar. I tried to achieve this goal by setting barPadding to a negative value:
seriesDefaults:{
renderer:$.jqplot.BarRenderer,
rendererOptions: {
varyBarColor: false,
fillToZero: true,
barPadding: -5, // number of pixels between adjacent bars in the same group (same category or bin).
barDirection: 'vertical', // vertical or horizontal.
barWidth: 20, // width of the bars. null to calculate automatically.
shadowOffset: 0 // offset from the bar edge to stroke the shadow.
},
},
This indeed makes the bars overlapping but the second bar overlaps the first one.
I would like it vice versa.
Is this possible with JQPlot or does anyone know another library with this possibility?
There is no such configuration in jqplot. However there is a hacky way to do it by setting the z-index.
$('#chart .jqplot-series-canvas:first').css( "z-index", 99999);
Demo