I have a page that contains multiple graphs made with NVD- chart.js . the graphs are placed in a dashboard , so each part of the dashboard contains a graph. This dashboard contains two line charts. The problem is that the tooltip of the second line-chart is badly placed in the left, so it's far from its line-chart.I tried to use this code to change the position of the tooltip by changing his container but there is no change:
chart.interactiveLayer.tooltip.chartContainer(d3.select('#chart_ligne svg'));
Any one have an idea how to use chartContainer ?
I had a very similar issue, with floating charts. After fiddling around, I just turned off the interactive guidelines. With this, I was able to contain the tooltips inside their respective container.
var chart = nv.models.lineChart()
.useInteractiveGuideline(false)
.showLegend(true)
Downside is you have to target specific points to be able to show the tooltip...
Related
I'm using Charts JS and I'd like to create some custom Labels on a Stacked Bar Chart. I'm trying to recreate this following chart:
How do I create custom labels as circled in Red above? I'd like to link to other pages with these labels. Actually the bolded text would link to one page and the normal text would link to another page.
Also How would you label each bar in a way that the values drop down off the bar when there is not enough room to display it on the bar? See the "4%" or "6%" on the right side of the graph.
I also want to know how to put a margin spacing between each stacked bar. See the vertical white space between each bar on the image above.
Any help with the issues above would be greatly appreciated. Thanks.
I ended up creating my own chart using div and widths. Sometime you have more control over look and feel if you build it your self.
I am using React plotly.js
in our application. We are plotting multiple graphs (line, area, bar). I need a way to customise look and feel of tooltip which appears on hover of graph.
This the code sandbox for references of my code.
This is the output of the plot.
Currently the tooltips appear clumsy when we have multiple lines with multiple graphs which appear individually at each line.
Do we have a way to show only one tooltip with data of all lines at a hovered point.
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/
I have a new requirement, that one page contains several highcharts.
And when I move mouse on one highchart, tooltips will be shown, and a guideline also will be shown. Maybe it calls trackball. In the same time, another highchart in this page, will also show its tooltips and guideline(trackball).
Just like this, http://jsfiddle.net/highcharts/nhVbs/,
but this is in one series.
Any one do such job before can give me some advise?
I only got one example for similar work.
http://vikinghammer.com/2012/02/02/connecting-highcharts-and-jqgrid-with-trigger-and-bind/
But not understand how he implement it.
When move the mouse to one line chart, two charts will all show the guidelines and tooltips.
Like this demonstrate.