How to display crosshair selected value on x-axis

2019-05-10 02:17发布

I am working on this project which includes displaying historical data on an interactive chart. I came to the conclusion that Highcharts / Highstock is the best alternative as it provides the most options of customization. What I am trying to achieve is to display the selected value and its according date on the x-axis and y-axis respectively once I hover over a point, and this for every point I hover on. I want the chart to have a similar layout to the Yahoo chart:

Yahoo chart displaying crosshair with value and date on the axes

As you can see from the chart above, no matter on what point I hover on, the crosshair will move accordingly and will show the date of the selected point on the x-axis and the price on the y-axis, in which if I move to the left the date label moves to the left as well and the same goes to the price label on the y-axis which moves up and down according to the chart trend showing the "Close" of the current stock. I have been researching on how to achieve this looking through the documentation and digging my way through the forum and I have not found any solution. I came as close as to this fiddle I found:

This fiddle, however, uses event.PageY and event.PageX instead of the default crosshair that comes with the library. Apart from that, it shows the entire range of prices e.g. I only have 6 data points and if I hover over the points the crosshair shows much more than that, basically the entire y-axis. If I get out of the chart range it will still show data (negative numbers) which cannot be the correct.

I know this is possible as I have found a chart which was produced with highcharts / highstock by looking at the source code and it does the same as the Yahoo chart with a slight difference in design. This is the chart:

Chart displaying crosshair labels with according value, volume and date on the x-axis and y-axis accordingly

The black horizontal line (black rectangle y-axis [127.62]) from the chart above was created with a plugin:

Are there any options to produce crosshair labels as in the chart above? Any documentation? Perhaps plugins? I am open to any suggestions and thank all you guys in advance for any help you can provide. King regards!!

0条回答
登录 后发表回答