Hide the rangeSelector and the stockchart line chart

[minhyen97]

Hello,
I'm creating a candlestick and volume chart :
Demo: https://jsfiddle.net/tz1s3j9o/
Currently I want to hide the two labels as shown above. I have researched the document but have not found a solution.
image:

stockchart.png (35.56 KiB) Viewed 3057 times

Thanks in advance for any help.

[dominik.c]

Hello minhyen97!

We appreciate you reaching out to us!

Do you want to hide these two are you've marked on your screenshot? You can disable rangeSelector, scrollbar and navigator. If you want to hide something else, please precise it.

API references:
https://api.highcharts.com/highstock/ra ... or.enabled
https://api.highcharts.com/highstock/scrollbar.enabled
https://api.highcharts.com/highstock/navigator.enabled

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

Best regards!

[minhyen97]

Thank you so much I have hidden it.
Can you help me with another little problem. It is responsive across many different screen sizes. I want when the screen size changes (the size gets smaller) the candles will appear less. Because the screen is currently small but there are too many candles, you will not see it. For example the number of candles will gradually decrease according to the screen size (90-60-30-10) now is more than 100 candles. Can you help me. I have researched through the documents but have not solved this problem.
Hope you will respond soon. Thank you very much!

[dominik.c]

Hi again!

Let me make sure. You don't want to have a lot of candles displayed at once because they're very small. Like in this demo, right? https://jsfiddle.net/BlackLabel/bhj73yux/

You'd rather have less of them displayed at once, but they should be bigger. Like in this demo, right?
https://jsfiddle.net/BlackLabel/uL3w06rp/

If that's the issue, you only need to set extremes of your axis properly. You can do it via rangeSelector (like in the above demos) or you can do it manually using setExtremes method.

API references:
https://api.highcharts.com/class-refere ... etExtremes

Best regards!

[minhyen97]

Yes, it is my intention.
Can you help me to automatically change the rangeSelector or setExtremes when resizing the screen. I have tried but with no success.

Code: Select all

 chart.yAxis[0].setExtremes(3,8);

Demo:https://jsfiddle.net/tec10hu5/4/
Thank you very much!

[dominik.c]

Hi again!

You've assigned the chart to the variable in the wrong way, that's why it didn't work. If you want to set extremes on xAxis you need to use timestamps for that. In the demo below I've also prepared a line with setting the extremes on yAxis so check it out too.

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

Let me know if that was what you were looking for!
Best regards!

[minhyen97]

Demo :https://jsfiddle.net/b6zqe59k/3/
I tried your way out but it doesn't work on realtime charting. It does not automatically delete old candles. I don't know where the fault is. Do you have other ideas about this.
I am working on event capture for rangeSelector but with no success.
Can you help me.

[dominik.c]

Hi again!

I've checked it and old candles are being slowly removed from the chart. Do you want to have fewer candles visible when you click the button? You can probably use setExtremes method every 3 seconds, to update min and max. Let me know if it helped.

Best regards!

[minhyen97]

I have tried setting it in setInterval but still cannot fix the desired number of candles.It seems setExtremes is only useful on the first call. Do you have a way to solve this problem.

Code: Select all

if(width<700 && width>500 ){
    chart.xAxis[0].setExtremes(timecurrent - 30000, timecurrent);
}
else if(width<=500 ){
      chart.xAxis[0].setExtremes(timecurrent - 15000, timecurrent);
}

Demo: https://jsfiddle.net/89mfhsgw/28/
Hope you will respond soon. thank you very much.

[dominik.c]

Hi again!

I've checked this issue in a simpler demo and it should work fine. Demo: https://jsfiddle.net/BlackLabel/bm9vdpcn/

I don't think that these conditions of width are necessary in your code. I'm not sure why it doesn't work. The extremes are set fine. I suggest reporting this as a bug on our GitHub. Here you've got a link: https://github.com/highcharts/highcharts/issues

And here is your demo without these conditions: https://jsfiddle.net/BlackLabel/7vxu6wra/

Best regards!

[minhyen97]

Thank you so much, my program worked.
However, there are a few problems with the color of the candle.
1. Currently the original candles do not match the real-time added candles (blue and white). I want it to turn red and blue like the extra candles after.
2. The heart and the border of the candle are black at the moment. I want to correct it with the same color as the candle's body (green or red).
I went through the documentation and tried a couple of ways but still hasn't solved this problem. Can you help me, I thank you for helping me so many times.
Demo :https://jsfiddle.net/3j8qanr1/1/

color.png (29.02 KiB) Viewed 3018 times

Hope you will respond soon.

[dominik.c]

Hi again!

1. We can go through all points of the loaded candlestick series and change the color of each point depending on the open and close value (the same as with extra data).

2. There's lineColor property, which is responsible for the color of the border and line of the candlestick.

API references:
https://api.highcharts.com/class-refere ... int#update
https://api.highcharts.com/highstock/se ... .lineColor

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

Best regards!