Cannot display a tooltip label showing the two values of the two series together without also merging the label

I am attaching this script because it is too long to paste.

ploty v3.html

☠️ To begin with, I had to add the reference to <script src="https://cdn.plot.ly/plotly-2.32.0.min.js?v=6"></script> because plotly-latest.min does not seem to be up to date.

☠️ I tried using a translation library, but it keeps formatting dates in English. And I had to write a function.

☠️ The plot must display the two y-axes consistently: if I zoom on one, it must also apply to the other; if I move one, the other must also move, so that the plots always have the same scale and are superimposed. Instead, I had to resort to locking the zoom! X works correctly, however.

☠️ I have come to the conclusion that either it creates a label for each point, or it creates a single tooltip label for all elements of that year. So it is not possible to create a tooltip that shows data on two y-series and another tooltip that shows only the year (x) when data is missing. If it creates the year, it puts it on all labels, even where there is data!

Good, although I would prefer it without the dotted line, which also has more thickness. It must show the year, even if perhaps with better graphics. Perhaps higher up, so as not to cover the year separation dots. If there are already values for that year, the year should not be displayed: it is redundant. However, **it does not seem possible to display a tooltip label showing the two values of the two series together without also merging the label.** And it's also the wrong year.

☠️ It doesn't display the values correctly at the end, and the hover effect disappears when the mouse is over the last star. In fact, the values displayed are incorrect.

Complete specification of what I want to achieve

const datiGrafico must contain the values to be displayed. If a value is missing, it is indicated by null. Dates are always present, otherwise the purpose is lost.

KEY POINTS:

• The left Y-axis must show costs in red, the right Y-axis must show kilometers in blue, and both must show whole numbers and a vertical axis legend.
• Above, there must be a legend indicating the meaning of the colors, even if redundant, or elsewhere.
• The two Y axes must move congruently: when one is moved or zoomed, the other must act accordingly, so that they remain superimposed. | Removed because it is not possible.
• The graph must show segments and a marker at the position of the points.
• The graph must show an error symbol if data is missing. If it is between valued dates, it will show a dotted line connecting the valid values. The symbol's tooltip must indicate which parameter is missing, or both if applicable. Currently, it is halfway up.
• The graph must show labels on the graph with dates in Italian (this required a method that I deeply dislike, because the library itself should do this).
• The horizontal lines must be equidistant from each other, the values at the extremes must be aligned; the two graphs must be aligned on X and Y. In other words, each horizontal axis must have a label on the right and one on the left
• The Y axes show the level values of the horizontal lines, which must be at a constant height and not those of the values. Otherwise, they would not be aligned.
• There should be no negative values, so the zero of both Y axes must correspond to the X axis. Any negative values will be drawn above the year labels. [This last part is to be done... perhaps, currently the negative parts are cut off].
• Along the X axis
  • the years must be shown as horizontal text, from oldest to newest
  • the year label must be centered text, halfway through the year (July 1), indicated by a mark longer than the dots; the mark (arrow) indicates July 1
  • At the point where the graph area moves from one year to the next, there must be a separating dot (January 1), but without a label.
  • Currently, the year labels are below the dots and arrows, but this is a huge task. It is actually a documentation problem: after a while, I found a decent solution. Previously, the years were at the same height as the dots, but the start and end information for that year was lost
  • The years with labels should not be those of the data, but should start with the first year of the first value and end with the last year of the last value (or slightly beyond), but in between there must be all possible years. The time must have a constant width. And this is not respected: the last year indicated is before the last value.
  • The labels on the years must not have decimals. As incredible as it may seem, this was one of the problems.
• Moving the mouse over the graph should bring up a semi-transparent yellow rectangle highlighting the area occupied by the year on which the mouse is positioned.
• If the data is there, then the div #myPlot graph is drawn after emptying it. Otherwise, the existing placeholder is left in place.

I removed the Autoscale button from the graph, as it only causes problems: the horizontal lines no longer coincide.

FURTHERMORE

• In order to place the year labels where I want and display useful information such as labels, I have to hide the real ones, thus creating endless series of data.

---

This is both a request for help (in the very rare event that it can be done) and a report of bugs and library shortcomings.

Bắt đầu với tệp ploty v3.html được đính kèm và tái hiện hành vi bằng cách sử dụng tham chiếu script plotly-2.32.0 cùng dữ liệu const datiGrafico. So sánh hành vi của tooltip, hover, trục kép, giá trị bị thiếu và nhãn năm với đặc tả đầy đủ, bao gồm điều kiện kết xuất #myPlot. Công việc được xem là hoàn tất khi xác định rõ hành vi nào trong số các hành vi được báo cáo là lỗi của thư viện hoặc yêu cầu không được hỗ trợ.