d3.js - nvd3 multichart Y axis are not on same line

Question

I am trying to compare different date ranges with different seris of multichart on nvd3. I'am facing with the issue that when the cursor on hover some ticks. The Y axises that needs to be compared are not on the same tick and tooltip behaves weird. However, not receiving any errors or exceptions thrown.You can find the example picture of chart and related code below:

const tickValues = val.series[0].values.map((o,i)=>o.x/1000);  // something like["0.10","0.20"] etc.
            nv.addGraph(() => {
                var height = 300;
                var chart = nv.models.multiChart().legendRightAxisHint("").useInteractiveGuideline(true).showLegend(false).height(height);
                chart.options({
                    hideY2:true
                });
                chart.xAxis.axisLabel('Date').tickValues(tickValues).tickFormat(function(d) {
                    return d3.time.format('%x')(new Date(d))
                });
                chart.yAxis1.axisLabel('Orders').tickFormat(d3.format('.02f'));
                chart.yAxis2.tickFormat(d3.format('.02f'));
                //              chart.yAxis2.tickFormat(d3.format('.02f'));
                this.redraw(chart)
                this.chartRef = chart
            });

question from:https://stackoverflow.com/questions/65883050/nvd3-multichart-y-axis-are-not-on-same-line

Answer 1

Waitting for answers