How to display selected crosshair value on x-axis and selected date on Y-axis on Highcharts / Highstock?

I am working on this project which involves displaying historical data in an interactive chart. I have found that Highcharts / Highstock is the best alternative as it provides most of the customization options. What I am trying to achieve is to display the selected value and its corresponding date on the x-axis and y-axis respectively, as soon as I hover over a point, and this is for each point I hover over. 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 above chart, no matter where I am, the crosshair will move accordingly and show the date of the selected point on the x-axis and the price on the y-axis, which if I move left, the date stamp moves to the left, and goes to the price tag along the Y-axis, which moves up and down according to the trend of the chart showing the "Close" of the current stock. I am researching how to achieve this by going through the documentation and working my way through the forum and I haven't found any solution. I came as close as possible to this fiddle I found:

However, this script uses event.PageY

and event.PageX

instead of the default cross-call that comes with the library. Moreover, it shows the entire price range, for example. I have only 6 data points and if I am over the points then the crosshair shows much more than the main on the Y-axis. If I go out of the chart range it still shows data (negative numbers) which may not be correct ...

I know this is possible as I found a chart that was prepared with highcharts / highstock by looking at the source code and it does the same thing as a Yahoo chart with a slight design difference. This is the graph:

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

The black horizontal line (black rectangular y-axis [127.62]) from the diagram above was created using the plugin:

Are there any options for creating crosshair marks like in the above diagram? Any documentation? Perhaps plugins? I'm open to any suggestions and thank you guys all for any help you can provide. The king welcomes!

+3


source to share





All Articles