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
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'm facing two problems.
How can I make sure that the whole legend can be seen under the graph? Indeed when the legend is too big three points are added.
My other problem concerns pie charts. How to make all the percentages appear on the graph, by default it puts them only when the place is sufficient on the graph?
Bar Chart problem
Pie Chart problem
Thanks you
Bar Chart Problem : Its the default behaviour. The 3-dots is called ellipses. It is used to truncate the strings to fit the in to the containing box/div. For more info, refer this. This workaround would help you if you wish the axes labels are need to be shown full. In case legend values, please refer this.
Please refrain rom using such long names for the axes as it affects the UX.
Pie Chart Problem : Its the default behaviour of Google Charts to show the values only if the values are sufficient to fit in the place. As a workaround, you can display all the values, in the chart using the option {legend : "labelled"}. Thanks to this Google Forum.
Example JS Fiddle
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/
Creating Sparkline line graphs.
http://jsfiddle.net/gwatts/PfzXg/
// Draw a sparkline for the #sparkline element
$('.sparkline').sparkline(values, {
type: "line",
tooltipSuffix: " widgets"
});
The jFiddle example is not the best, but I think it illustrates the point.
The default behavior is to have the tooltips appear once the mouse hovers over the value. The "5 widgets" tooltip appears when you hover over the point.
Is it possible to have the tooltip always appear?
I wanted to make a graph that is bigger and has static data labels (tooltips), but I don't see any mention of it in the documentation.
https://omnipotent.net/jquery.sparkline/#s-docs
The answer to this question could be response to yours.
here the answer:
http://omnipotent.net/jquery.sparkline/#s-faq
Frequently Asked Questions
Why are there no axis labels/markers?
Sparklines are intended to be small enough to fit alongside a line of text, to give a quick impression of a trend or pattern and thus don't have the paraphernalia of full sized charts. As of version 2.0 you can mouse over the sparklines to see the underlying data.
It is necessary use Sparkline library in your project?, if you want a big chart and labels you have other option like http://www.chartjs.org/samples/latest/.
With Highcharts, while the legend box aligns at right of the chart, with lots of legend items, it provides a legend item pagination, and scroll up/down buttons. However, sometimes the scroll down button got cut off from the right edge of the window.
I found out it only happens when the legend items' texts are too short (1 letter), which causes the width of the legend box to be not wide enough to cover the whole pagination button set.
I don't know why Highcharts doesn't take the width of the pagination button set as a parameter while calculating the legend box width. I believe this is an issue that Highcharts needs to solve.
Anyway, is there a nice way to solve this problem? I couldn't find any properties in legend to make it work.
Here is a fiddle of this issue, not as terrible as the image, but still makes a point.
https://jsfiddle.net/scottszb1987/aquurLfc/
Use x and y offsets to align legend, to achieve your expected result following x offset value will fix the issue
legend:{
align: "right",
floating: true,
verticalAlign: "middle",
layout: "vertical",
x:-3
}
Updated fiddle- https://jsfiddle.net/Nagasai_Aytha/aquurLfc/16/
I had a special case rendering many charts and had to use floating legends. My case was fairly complicated which also required the ability to print the reports and there was a lot of variable data to be rendered. In the end I killed the entire pagination feature by adding the below code snippet after rendering the chart. Keep in mind I did some css hacks as well to revise overflows etc. Anyone who just wants to kill that pagination feature, the below code works great.
$(".highcharts-legend g").attr("clip-path", "");