Looking to add a custom tooltip that displays on hover of a reference line. But it looks like there is no built in capability for this :(.
Has anyone found a hacky solution for this?
Tried adding a onMouseHover on reference line, grabbing the coords/position in the custom tooltip element and using the onMouseHover on the actual linechart. None of these seemed to work :(.
Related
I did a search and could not find an exact answer and I'm a bit of a newbie with ChartJS.
Right now I've got a chart that draws a vertical line on top of a line using an added plugin to ChartJS. My thought now is that I'm looking to make it so that the tooltip's value displays elsewhere not on the canvas. Pretty much I'm trying to recreate a Robinhood like experience.
I have the line and tracking already created. My only issue is that I want to have some text that displays the tooltip value and changes for each point. The red circle is what I'm looking to simulate for the tooltip. Instead of having it appear at the point, it should be fixed at a location and of course change values depending on the point.
I think I've read somewhere there is a method that can be used for ChartJS called getPointsAtEvent, but I'm not exactly sure how to properly use this, but if someone could help me, I'd be really grateful.
I got it to work out using customToolTips and using the tooltip.dataPoints.length. One issue I had when going through this though was that an error appears in the console when you go out of the canvas area, but doesn't stop anything from working.
I'm not exactly how to fix this one, but if anyone has encountered it, please let me know:
(http://localhost:3000/Chart.js:10917:4)
dashboard:178 Uncaught TypeError: Cannot read property 'style' of null
at ChartElement.customTooltips (dashboard:178)
at ChartElement.update (Chart.js:8660)
at ChartElement.handleEvent (Chart.js:8952)
at Chart.eventHandler (Chart.js:4679)
at listener (Chart.js:4609)
at HTMLCanvasElement.proxies.(anonymous)
I have two plugins, one which displays a horizontal line across a chart (example image show below) and one which displays a label inside a donut chart. In both cases when the tooltip is triggered for the base chart, it displays beneath (i.e. lower z-position) the plugin's drawing.
I know I can create a fully customized tooltip which might solve this problem, but wanted to know if there was a configuration I'm not seeing or a simpler solution.
I can post code if necessary, but didn't think it'd be useful.
I believe that you should have posted the code for clarity. Since you are talking about plugins, you have overridden at least one plugin method. One of the methods you have overridden is probably afterDraw. Overriding afterDraw would present the problem you mention, I believe. Try changing afterDraw to afterDatasetsDraw. Look at the docs for the plugin methods that can be overridden. You want the lines to be drawn before the tooltip is drawn, so drawing the lines right after the datasets are drawn seems like a nice solution. Maybe using beforeDatasetsDraw instead would be a nice solution too, depending on whether you would want the bars to be above the lines or not.
I am trying to create an html imagemap with highlighting.
I therefor use http://www.outsharked.com/imagemapster/ which did work on my tryouts, but does not work on the final map. The areas in the map seem to be correct - I did attach an click handler to them responding with the expected area. However, imagemapster does not highlight the areas.
What am I missing here?
Find my example here http://bernhardriegler.github.io/imagemap/index.html
found the answer here:
jQuery plugin imagemapster isn't doing anything
imagemapster does require the href attribute on all areas you wish to highlight.
In a program I am creating, I need to have dragging. I figured out this part through W3schools but I can't seem to figure out how to customize it... What I'm trying to achieve is dragging but no ghost effect, and making it so the original image is hidden so it looks like it is only one image. Another thing I'm trying to do is get rid of the symbols. I'm clueless as to how to get rid of the symbols, and I can't manage to change the opacity of the ghost image... I've looked at a few other answers but I can't seem to get it to work.
My JSFiddle
#pointer1{pointer-events:none} //This prevents selecting of the drag. Not what I wanted
#pointer1{/*How to change the ghost?*/}
I would use jQuery for this. It will let you set options for the things you're looking for.
jQuery UI Drag Documentstion
I am currently experiencing a problem using the dChart widget addon (wrapper for jqPlot) in Vaadin v7.5.2. Here is a snippet of the code that is giving me a headache:
ComboBox comboBox = new ComboBox();
DCharts chart = new DCharts();
VerticalLayout content = new VerticalLayout();
content.addComponent(comboBox);
content.addComponent(chart);
content.setExpandRatio(chart, 1.0f);
setContent(content);
chart.setDataSeries(dataSeries).setOptions(options).show();
The problem is that when I use setExpandRatio, the chart is overflowing from the container when the page is loaded. Here is a picture to illustrate:
When I use web developer tools to hide the ComboBox and remove the margins, the plot looks OK. So it seems the plot gets drawn before the expand ratio is set, as if it doens't know the ComboBox is there.
However after selecting another item from the ComboBox (which loads another DataSeries), the chart is drawn within the expected boundaries and does not overflow. Also, when not setting an expand ratio or without adding the ComboBox, everything works as it should.
Has anyone ever experienced similar issues, or has any idea what I could do to fix this? Any help is of course greatly appreciated!
I know this is not an ideal solution, but I somehow managed to solve my problem by using an AbsoluteLayout, and drawing the plot using top: 40px. After that I add the ComboBox to the layout. That way the plot always gets drawn on the correct position.
Just leaving this here as a temporary solution, so if anyone has a better one please do not hesitate!