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:
Related
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.
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'}
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.
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.
working on high charts. Need to update dual x axis, but only one data sereies has to scale and on tool tip has to show dual x axis values with legends.