Recharts scatterplot custom dot/onClick dot? - recharts

I'm trying to make points on a scatter plot clickable, they should link to another page. I will need to access the payload inside of each dot, so the onClick handler on is not enough as it only gives me the coordinates of the dot. I'd also like to be able to customize the dot color based on the payload.
I'd love to be able to create a custom dot component and pass it in as a prop, but I have not found a way to do that yet.

Related

How to make a tooltip for a chart in d3?

We need to make it move like here.example The code is complex there, I can't figure it out.
I wrote the code my code, but I don’t understand how to make the tooltip move horizontally not behind the mouse, but near the nearest horizontal mark (as in the example)
It is not yet clear where the text above the bold text in the tooltip comes from. How to remove it so that it looks like in the picture?
How do I make the title of the tooltip match the label on the X-axis?
There are many ways to accomplish this. The way I typically do this is to create a series of SVG elements -- such as circles or rects -- using the same scale and data as the paths.
You can make these objects visible or invisible. Either way, you can attach mouseenter, mouseleave events to each to render and populate the tooltip.

How to specify custom image for either Scatter Chart or Bubble Chart?

I have a CombinedChart in my app (same app on both Android and iOS platforms using MPAndroidChart & iOS-Charts respectively) with stacked bars and a line but I also need to highlight specific points where a given event happened. I've got some small icon images (png) and need to place the correct image at the correct place on the graph depending on what type of event happened.
I have tried Bubble chart first and can get bubbles of the right colour at the right location but can't specify custom image instead of the bubbles' circles.
I am now trying Scatter Chart which does have a Custom shape option but it's not just a shape I need, it's a specific image. I have not worked with Core Graphics before so I'm not familiar with CGPath functions.
Is there a way to pass a UIImage to the ScatterChart customScatterShape property?
Or maybe a way to convert a UIImage created from a named png to a CGPath object which the Scatter Chart custom shape requires?
Thanks in advance for your suggestions!
As of MPAndroid version 3.0.2, you can pass in a Drawable as part of your Entry dataSet.add(new Entry(x, y, drawable)), and enable the drawIcons flag via dataSet.setDrawIcons(true).
Source code where icon gets drawn for Line charts specifically: LineChartRenderer.java

HTML5 Canvas: Create tooltip on customized drawing

I am using Flot to plot images for our project. For pre-defined shapes like line, pie, I can add tooltip through flot.tooltip.
However, we have some images that are drawn through Html5 canvas API, such as Here. I would like to add a tooltip for the red rectangle and another tooltip for the blank area. Any library to make it work?
With canvas there isn't a good way to detect when the mouse hovers over a particular drawn item; it's just a buffer, with no idea of what operations were used to draw into it. Flot's own hover detection has no concept of what was drawn on the canvas; it just knows that, e.g. the pie starts at a particular point and extend outwards a certain number of pixels.
So no matter what, you will have to write a function that accepts a mouse event, examines whatever data you used to draw the image, and decides what that corresponds to.
Where Flot could help is in providing a way to override the built-in hover function with your own; then the tooltip plugin would simply work with your function. Since you can't currently do that, you have a choice of a) modifying the tooltip plugin to use your function, or b) registering your own mousemove listener on the overlay element, which then generates 'fake' plothover events for the tooltip plugin to consume.

Invert nvd3.js legend click function

So, in nvd3 charts, clicking on a legend entry basically filters that out of the chart window (for instance in the case of area charts). I want to invert this functionality..i.e. show the particular chart when its corresponding legend is shown and hide all the others...is there a way to do it?
It is similar to what happens when user hits the chart itself (i.e. only the one that is clicked is expanded and rest of the streams hide).
I am referring to this example: http://nvd3.org/ghpages/stackedArea.html
There's a radioButtonMode that should do exactly what you want. You should be able to set this on the chart, i.e.
chart.radioButtonMode(true);

Get all points in a tile in Matplotlib's hexbin

I would like to create an interactive hexbin plot where clicking on a tile results in printing all points in that tile. How can I retrieve those indices? I know that I can set picker=True when calling hexbin to enable events, create a callback function on_pick(event), then register it with gcf().mpl_connect(on_pick), but I don't know how to interpret the event I receive. Were I using scatter instead of hexbin, event.ind would correspond to my goal, but the contents seem to be different under hexbin.
Thanks!

Resources