I wanted to enable data labels in the chart I created. However, when I saw the graph all the data labels are not visible/drawn. In this image you cannot see the data labels in all points
However as part of this post, I wanted to give the fiddle with the chart text that is generated for your reference. But when I ran that fiddle it seemed like it was working. I am not sure if I am missing any thing.
Another issue is the tool tip is gone. Can I not have tooltip along with the data labels? Data labels are essential for me since the downloaded images wont have tool tip and datalabels come handy. Tooltips are handly in web application.
Can any one help me in this here?
Here is the code from the jsfiddle I am talking about:
plotOptions: {
spline: {
dataLabels: {
enabled: 'True'
},
enableMouseTracking: false
}
}
The issue is enableMouseTracking: false. Setting this means that HC will not listen to where the mouse is so it doesn't know where to put the tooltip. Turn this back on and tool tips will show.
Also, you have tons of dangling commas on your jsFiddle. Click on JSHint at the top to highlight them. Chrome and FF can sort of ignore them but other browsers like IE will throw errors.
You need to use crop to show all datalabels.
Related
This a sample in highcharts for what exactly i need to create. The issue i am facing is the blue color should be in the area chart series, but highchart is applying the color at the top (outside the series). I apologize if i am not able to explain the issue correctly.
This happens when i use reversed: true, in yAxis.
Please help or let me know if you need me to explain the issue in different words.
When you reverse the axis, the data reverses as well, to match.
I would probably do this by using negative values as the axis min/max, and the data points.
Then, in the axis label formatter, return the absolute value (removing the '-').
labels: {
formatter: function() {
return Math.abs(this.value);
}
}
You can use the same formatting method to fix the tool tips, data labels, and anything else that might need it.
Example:
http://jsfiddle.net/jlbriggs/MybCM/27/
I'm using http://www.chartjs.org/ to create a simple line graph.
Now I want to show all tooltips. I do not want default on Hover behaviour. I am certain that at any moment I will not have more than 10-12 points on graph. So I want the tooltips to be always open.
If this is not possible with ChartJS, I'm open for opting for other library.
I don't know if this is possible with chartjs (a quick search did not reveal anything) but I think what you want is possible using highcharts. Here you can use the datalabels option:
plotOptions: {
line: {
dataLabels: {
enabled: true
},
Here is a demo. Does that help?
EDIT:
Another possibility for free could be jqPlot. For a demo have look here! There is a pointLabels plugin which places labels on the plot at the data point locations. Should do the trick. :)
var plot1 = $.jqplot('chart1', [line1], {
title: 'Point Labels',
seriesDefaults: {
showMarker:false,
pointLabels: { show:true }
}
});
Cheers and good luck.
If you want to add more multiple static points please use annotations. Tooltips are just tips for a user when hovering instead of static information on different points in the graph.
I suggest using a wrapper on top of chartJS and using their annotation feature https://apexcharts.com/docs/annotations/
I have several highcharts graphs set up and have recently noticed that I'm unable to click on legend entries to show/hide their associated series in Firefox. This works fine in Chrome and Safari so it seems like this is a browser-related issue.
I've noticed that the highcharts demoes do not have this problem, so it must be something I'm doing in my implementation but I'm having a very difficult time figuring it out. What is it that Firefox does differently that could cause this sort of problem with highcharts?
Point of interest: if I set the chart's useHtml parameter to true, the legend entries become clickable. This is not a solution however because it breaks a bunch of other stuff.
Thanks!
I had a similar problem, in which points in line graphs were not clickable in Firefox (but they were clickable in Chrome). Turned out that Firefox places the dataLabels on top of the graph points.
Solved it with:
plotOptions: {
series: {
dataLabels: {
zIndex: 2
See also:
http://api.highcharts.com/highcharts#plotOptions.series.dataLabels
I solved this problem, which happened for me in Firefox, Chrome, and Safari, but not in IE9.
I found out the problem is CSS related. My page has 2 "boxes"; left and right. My Vaadin pie chart is sitting on the right box. On the left box I have a html <H1> tag that has width overflow to the right box (width: 900px) which covers part of the pie chart. As a result some rectangular area is not clickable. This can easily be fixed by using the Firefox Firebug tool to inspect the CSS. I hope this saves you the hours I spent to install the latest vaadin chart library; debug the codes, etc.
Sometimes it is very difficult to get the Highcharts Javascript charting library to show a tool tip for certain data points. For example, try to show the tooltip of the data point at 50,50 on the below link. It is very difficult to get it to show, and it flickers a lot. Does anyone know about some workaround?
http://highcharts.com/jsbin/ogixaz/2/edit
I tried it with an update-to-date Chrome and Firefox.
have you tried:
//...
plotOptions:{
series:{
stickyTracking:true;
}
}
UPDATE:
I have to say that i looked at your embeded example and understood exactly what you meant,
but after moveing your code into the jsFiddle and setting the property shared:true (in the tooltip object), it works fine. check it... http://jsfiddle.net/yoav_barnea/LFvVy/2/
the important part is the property shared:true :
tooltip: {
formatter: function() {
return '<b style="font-size:18px;font-weight:bold;">Some very long title</b><br/>' + this.x + ":" + this.y + " <br/>and some<br/> extra stuff<br/>line<br/>line";
},
useHTML: true,
shared:true
},
UPDATE 2:
as for your other problem on getting the costom c property (that you mentioned in the comment...), the solution for that is to fix your code inside the formatter function into somthing like this: return ... this.points[0].point.c
(again, this was a new issue, not related to the first one of flickering tooltip...)
The reason the tooltip at 50,50 flickers is because the tooltip is being drawn over the point. The points to the left and right allow room for the tooltip to be drawn to the side. The reason the middle one can't be drawn to the side is that the chart is small, and the toolip is big.
Some ideas to help this situation:
1. Making the tooltip smaller.
2. Make the chart bigger (try making the right hand side bigger in your example).
3. Use the highcharts tooltip.positioner function to place the tooltip somewhere else.
I know this question has been asked before and I have used heavily a lot of the answers provided by others but am still not 100% the way there.
I want all series lines to be grey and one mouseOver of the line, "turn on" their color, on mouseout revert back to grey.
Ive got this partially working here however there are some obvious issues:
I know, Ive hardcoded the series array position. I couldnt figure out how to determine what series the mouse was on. Whats the best way to do this?
plotOptions: {
series: {
events: {
mouseOver: function() {chart.series[0].graph.attr('stroke', '#0000FF');
$report.html('Moused over')
.css('color', 'green');
},
mouseOut: function() {chart.series[0].graph.attr('stroke', '#C0C0C0');
$report.html('Moused out')
.css('color', 'red');
}
}
}
}
Mouseout isnt triggered until the cursor leaves the chart area. How do I track mouse events more precisely for series lines?
Any improvement to my current code is highly appreciated.
You can use:
this.graph.attr('stroke', '#0000FF');
instead of hard coding a series:
http://jsfiddle.net/jlbriggs/f3Wq2/5/
I had something similar going a while back, using checkboxes rather than mouseover events. Just in case there's anything in it that's helpful:
http://jsfiddle.net/jlbriggs/57SR9/21/
I believe this example may be the solution for the mouseout issue:
http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/highcharts/plotoptions/series-events-mouseover-no-sticky/
This paramter may be what you need:
stickyTracking: false,
And in the docs:
http://api.highcharts.com/highcharts#plotOptions.series.events.mouseOut