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.
Related
I am trying to plot daily tasks in what i would describe as a discontinuous stacked bar graph. Another description would be a vertical gantt chart of past events.
If the description is lacking, the result i want is something like that shown in the image below (made in paint).
All task have a duration (from-to time) and can have different categories which results in different colours with belonging legends.
I have been playing around with two javascript plotting libraries; chart.js and plotly.js, and looking at others but i haven't found anything that can do what i want to achieve. Both chart.js and plotly have stacked bar graphs, but i see no way of getting spaces in between the bars and getting the legends right.
Do anyone have an idea if this is possible in any these two libraries? If not is there an alternative library where this can be done?
Regards
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 multiple charts in different divs on the same page. All charts
have zoom/pan implemented. However, I want to implement synchronized zooming/panning across all charts, such that when someone zooms/pans one chart all charts zoom/pan together.
In other words, I'd like to implement mbostock's Focus and Context (http://bl.ocks.org/mbostock/1667367) when they are in different divs.
I'm using angular.
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...
I am using the Zoomable Pack Layout provided on the D3 website: http://mbostock.github.io/d3/talk/20111116/pack-hierarchy.html
All labels of the circles are displayed when the layout is displayed.
The problem is that for small circles which are close together, the labels overlap. I would like to know if there is a way to hide the overlapping text of the labels?
I have read about "foreignobject", but if this is the answer, I am not sure how and where to incorporate it in the code.
You could restrict the display of text based on either the level of the hierarchy, the radius of the circle or a combination of both. Both are in the pack output. Use titles for hover detail.