So I am working on a chart.js project for a client and one of the charts they want is a radar chart of all their metrics. The image below is the sample chart
The issue I'm having is with the tooltips. In the default mode everything works fine except for the very center. There are several values that are zero and when I hover over them it displays all of them. What I need is for it to only display one.
I tried setting the mode to 'single' even though it is depreciated and that worked. However, that brought a new problem.
options: {
tooltips: {
mode: 'single'
}
}
When I hover over an element, the entire dataset highlights and the rest disappear. Its kind of hard to tell but the two images below are highlighting two different datasets, but since the points overlap slightly, the tooltip value is not updating
I am using the latest version of chart.js (2.9.3) as of posting this
Related
I want to change how Chart.js renders tooltips when using index mode. By default, Chart.js displays a line break between tooltips for each dataset. I need to modify this behavior.
I tried using the label callback function but it seems Chart.js calls the function once for each dataset, not after consolidating the tooltips.
Current tooltip display:
Desired tooltip display:
The reason I want to do this is that my graph can contain a large number of datasets and the tooltip box height exceeds the graph height and gets truncated when that happens.
Thanks.
If anyone comes across this in the future, I eventually managed to get the behavior I need using the following steps:
Copy over the implementation of tooltips display from the ChartJS source.
Modify the HTML injected in this code to recreate the behavior you require.
Overwrite the ChartJS source for this function with your modified function.
I have a single chart webpage showing Highchart line:bar graph: http://www.jcsweb.biz/mef/AnimGIF/legend_csv_03h_1Cht_01d.htm
with external chart data:
http://www.jcsweb.biz/mef/csv_dump/HC_TEST_DATA1.CSV
and Chart Legend Tooltip (long string) from an external file: http://www.jcsweb.biz/mef/csv_dump/HC_TEST_LEGEND1.CSV
So on mouseover of chart series legend, a much longer Legend tooltip is displayed (ie as held in HC_TEST_LEGEND?.CSV).
It all works fine, but hits problems with the longer Legend tooltip when I try and "double up" to display 2 (or more) such charts on a single webpage. http://www.jcsweb.biz/mef/AnimGIF/legend_csv_03h_2Cht_01d.htm
The Upper chart long Legend tooltip displays fine (as above) but the Bottom chart doesnt display ANY longer Legend description from HC_TEST_LEGEND2.CSV.
In moving to 2 charts, I have tried to make the JavaScript code/variables names distinctive to each chart eg "legendData1" vs "legendData2" but I have run out of browser debug pointers to find the js coding legend tooltip error !
Any help/pointers on finding the offending code in Chart 2 much appreciated
The source of your problem is probably the value of e2.clientY. I debugged your code and it has the value higher than the chart's height. It seems that this value is relative to the whole document. When you assign attributes to your legend tooltip object then (.attr()) all the values are relative to the chart container. So in this case your tooltip is created outside of the chart and is not visible.
Here's live working demo of legend tooltip that uses properties of SVGElements instead of mouse event: http://jsfiddle.net/kkulig/mujn4eja/
I'm using chart.js within a grid system for a project.
The grid system allows users to make relatively small charts.
In this situation we truncate the axis labels based on fixed breakpoints against the grid size for that axis.
However as a requirement for this work the user needs to be presented with a tooltip when hovering over the truncated axis label.
Is this at all possible with Chart.JS? Either naitively or through a plugin?
I'm assuming if hooks are available ill have to use a callback method, like with data-points, to get the un-truncated label.
Ive looked through the documentation on Tooltips and couldn't find anything for Axis label tooltips.
To clarify
Is it possible for Chart.Js to show a tooltip just for the Axis Labels independently to tooltips shown when hovering over a data-point?
In the following fiddle the YAxis label has been truncated as it is too long for the space. (This would be done pragmatically by my code in production). What i would like is for Chart.js to render a tooltip when the user hovers over that axis label and provide it with the full un-truncated label.
Ive seen the following option block, however it mentions nothing in the docs about tooltips for this option. I'm beginning to fear its not possible. Just after confirmation or not of that really.
scaleLabel: {
display: true,
labelString: 'Some Axis...'
}
Thanks
I'm using Material Charts from Visualization API by Google in my project and I need to force showing every label on horizontal axis. Now there is approximately 30 columns and plenty of space next to each other, but it shows only 6 labels of them.
I've got in options set:
hAxis: {
minTextSpacing: 0,
showTextEvery: 1,
slantedText: true
}
Which works properly in Classic Charts, but the same settings doesn't seem to work in Material Charts. Is it some kind of bug? And if so, is there maybe another way how to achieve this?
Unfortunately it's most likely not a bug. Material Charts are still in beta and some features aren't yet supported. The only option for using the missing features is to use Classic Charts (corechart).
I had problems with legend pagination, and found these resources:
https://github.com/google/google-visualization-issues/issues/1964
Google Charts legend is not correctly displayed
https://groups.google.com/forum/#!topic/google-visualization-api/akJ-SOd5Zn0
I've got Highstock running on a website loading two series from two different csv/log files on the same webserver.
I previously had this exact setup on a different server where it worked flawlessly.
On the new server, however, the chart doesn't render properly. When the page is loaded the series lines do not display. If you zoom in, or scroll away from the rightmost edge of the chart the lines pop into view. If you scroll back all the way to the right the lines stop displaying.
The actual chart can be seen here on this temporary page:
http://maxedin.com/pages/18/
The JS which loads the chart here:
http://jsfiddle.net/3Jpb3/
The chart is loaded with this div element:
<div id="mholmen" style = "width:100%"></div>
I've tried playing around with the different zoom options, chart sizes, modifying the data that's being loaded and such to no luck.
Has anyone else bumped into this same issue and managed to fix it?
In your data you have some NaN's, for example:
lines[2154]: Array[2]
0: NaN
1: NaN
Which can not be displayed on a chart. Make also sure that data doesn't contain duplitaced and is ordered for xAxis ascending.
Thanks to Pawel Fus I figured it out. Turns out the text editor nano which I used to view and edit the log files did some odd things while saving them. Editing the files in textwrangler fixed my problems. Go figure.