Tooltip for multiple data sets in d3 - javascript

I have made a scatter plot by merging two individual scatter plots with data sets [x,y1] and [x,y2] (two values of y for one value of x). And I want to create tooltips for all the points depicting their x and y coordinates .So tooltips depicting any point with coordinates (x,y1) should have the value of x and y1 and tooltips with coordinates x and y2 should show (x,y2) .Is there any way to create such a tooltip?
P.S :- The chart also has overlapping points.

Use 'title' in the x or y..
For Ex: {x=value; title='Title Name'}

Related

d3.js chart with a dynamic and overlapping Y axis

How can I show multiple time series overlapping each other with a dynamic Y axis that changes depending on which series is selected by the user.
The goal is to be able to compare patterns in the data, but it requires us to able able to display these charts overlapping on the Y axis.
Say TS1 (timeseries 1) has a dynamic range of [0 -> 2000] on the Y axis.
Say TS2 (timeseries 2) has a dynamic range of [500 -> 10,000] on the Y axis.
d3.js needs to be able to display both series on the graph overlapping (not stacking) on the Y axis.
Here is an example with pictures (Notice the change in Y Axis):
Green Series Selected:
Blue Series Selected:

Antd Charts - Area chart series values plot relative to last series

I'm trying to use Ant Design charts to plot an area chart with 3 series - actual, target and forecast. For some reason, the chart plots the series relative to the last item in the array, rather than relative to the x axis. I tried setting the startOnZero: true but that didn't help.
See below example:
In this example, the target is 220 and the actual is 1558, but the target point is higher on the y axis. Recreated:
https://codesandbox.io/s/beautiful-grothendieck-qtjj7?file=/App.tsx:8366-8384
If we put the 'Target' values to the bottom of the data array, it works fine for some reason:
By default it creates a stacked chart. You can set isStack to false.

showing x axis label for each graph in plotly subplot with shared x axis

I have created a subplot with plotly.JS , x axis is shared for each graph as given in the below picture.
I want to show the x axis values for all graphs in the subplot instead for showing it only for graph at bottom. I achieved this using anchor attribute, but the graphs are not aligned well. Look at the below picture, here 600 of graph2 is not positioned exactly to the other two graphs.
I want all the graph to share x axis as well as show the x axis values on each graph.

Highcharts background color based on x y

I'm working on makin a graph like this in highcharts:
But I have problems making the green red yellow background colors based on y and x axis.
This is an example I have found but it's only based on the y axis: jsfiddle.net/tK7ux
And I want to use plotBands on both X and Y at the same time, if possible.
Maybe there is another way than using plotBands ? i have also looked at Renderer functions and making an rectangle, but the problem was that it is the position not is based on the Y and X axis.

Draw plot bands between 2 points in x axis - Highcharts

I have been working with highcharts for a while now. I understand that we can draw plot bands like this
I need to get this customized like the one in the chart below, any pointers on how we could do it?
You need to use renderer (path with z option, which end shape)
http://api.highcharts.com/highcharts#Renderer

Categories

Resources