varnguyen
Posts: 22
Joined: Fri Jan 08, 2021 3:32 am

Market Depth Chart

Hello,

I have implemented Depth Chart but it still doesn't meet my requirement.
Below is the code I implemented.

Live demo: https://jsfiddle.net/zquwo4r3/1/

My problem:
1: I have a series that is a 2-part array from me, Bids and Asks, and when I hover on Bis, Asks is greyed out and vice versa (picture below)
2: When I hover in a space on the wall on the Bis side, I don't see an extra point on the symmetrical side on the Asks side

Current:
chart 2.png
chart 2.png (15.84 KiB) Viewed 784 times
Expect:
chart 1.png
chart 1.png (74.4 KiB) Viewed 784 times
Thanks
hubert.k
Posts: 1164
Joined: Mon Apr 11, 2022 11:48 am

Re: Market Depth Chart

Hi varnguyen!
Thanks for contacting us with your question!

Answering your questions:
1) If you want to disable changing the opacity of other series while hovering, all you need to set is plotOptions.states.inactive.enabled to false. You can check the demo below.
2) I am not sure what you want to achieve. Could you show me a little bit more matter on that? What did you mean by 'extra point on the symmetrical side'?

Demo: https://jsfiddle.net/BlackLabel/Lwkqys8h/
API Reference: https://api.highcharts.com/highcharts/s ... s.inactive

I am waiting for your response.
Best regards!
Hubert Kozik
Highcharts Developer
varnguyen
Posts: 22
Joined: Fri Jan 08, 2021 3:32 am

Re: Market Depth Chart

Hi hubert.k,
Thanks for your response.

I used plotOptions.states.inactive.enabled and it worked. Thanks
As for the excess point on the symmetry side, I will talk specifically as follows:
chart 3.png
chart 3.png (89.75 KiB) Viewed 762 times
I have a depth chart as shown.
First, when I use the mouse pointer to hover at position 1, I will get its corresponding value along the X, Y axes and display the information (eg position 3 and 31.9).
Next you can see when I hover on position 1 from the distance from it to the Market Price axis which is 0.1%.
And I want on ASKS side to be able to draw 1 axis as well but its coordinates are also 0.1 % from Market Price to position 2 (eg position 4 and 32.1).

That's all I expect.

Thanks
hubert.k
Posts: 1164
Joined: Mon Apr 11, 2022 11:48 am

Re: Market Depth Chart

varnguyen,

Sadly, there is no feature like mirroring two points on two opposite series in Highcharts. To implement it you would need to use a lot of custom JS code and unfortunately, it would be beyond the scope of support on our forum. If you need help with your implementation, you can contact the Black Label company that specializes in Highcharts custom projects. See the official Black Label site: https://blacklabel.pl

Best regards!
Hubert Kozik
Highcharts Developer
varnguyen
Posts: 22
Joined: Fri Jan 08, 2021 3:32 am

Re: Market Depth Chart

Hi hubert.k,

Thanks for your support!

Best regards!
hubert.k
Posts: 1164
Joined: Mon Apr 11, 2022 11:48 am

Re: Market Depth Chart

You're welcome! In case of any further questions, feel free to contact us again.
Hubert Kozik
Highcharts Developer
varnguyen
Posts: 22
Joined: Fri Jan 08, 2021 3:32 am

Re: Market Depth Chart

Hi hubert.k,

I thought I'd post the problem in this thread because it's also related.

Currently I have a depth chart like the example below:
Live demo : https://jsfiddle.net/t8e127cn/9/

Each of my charts has 3 price steps.
Mid Price is the realtime value returned from the socket and it always returns 1 of 2 cases:
Case 1. = 20.4
Case 2. = 20.45

So when the chart is plotted, Mid Price (XAxis plotLines) will not be in the middle of the chart.

Expectation: Mid Price is always plotted in the middle of the chart even when it's realtime.

Best regards!
hubert.k
Posts: 1164
Joined: Mon Apr 11, 2022 11:48 am

Re: Market Depth Chart

varnguyen,
I am sorry, but I think I'm missing something. You cannot plot xAxis.plotLine called MidPrice in the middle of chart due to its value. If you want to have it in the middle you have to manipulate plotLines.value and set it as you would like to. If you set it to 20.425 it will be in the middle of the chart.

Demo: https://jsfiddle.net/BlackLabel/hxrkj9e7/

Regards!
Hubert Kozik
Highcharts Developer
varnguyen
Posts: 22
Joined: Fri Jan 08, 2021 3:32 am

Re: Market Depth Chart

Hi hubert.k,

I understand and I can calculate the mean to reset it to plotLines.value but it doesn't reflect the value returned from the Socket.

Regards!
hubert.k
Posts: 1164
Joined: Mon Apr 11, 2022 11:48 am

Re: Market Depth Chart

Sorry, but I don't understand what you mean by saying it doesn't reflect the value returned from the Socket. Could you elaborate, by for example adding some images or gifs to help me understand what are you trying to achieve?

Kind regards!
Hubert Kozik
Highcharts Developer

Return to “Highcharts Usage”