tndev
Posts: 9
Joined: Tue May 05, 2020 9:56 pm

Highcharts Stock problem in rtl language

I have a stock chart where I need it to be RTL direction, I saw few problems in the stock charts :
1) the range selector is pretty messed up
2) when I put in tooltip the two option outside true and useHTML true it went Blur
tooltip : {
outside : true,
useHTML : true,
}

here is a link for js fiddle . https://jsfiddle.net/skn1h4a3/14/ .
one more question I want the stock chart to start from Xday to yDay how is that possible . Happy coding everyone. :D .
User avatar
sebastian.h
Posts: 1734
Joined: Fri Aug 07, 2020 7:08 am

Re: Highcharts Stock problem in rtl language

Hi,

Thanks for contacting us with your question.

I set styledMode: true and import style to css, chart look better.
https://api.highcharts.com/highstock/chart.style
https://www.highcharts.com/docs/chart-d ... yle-by-css

Good choice tooltip.useHTML it's a recommended options for rtl languages.
It is also recommended for rtl languages as it works around rtl bugs in early Firefox.
https://api.highcharts.com/highstock/tooltip.useHTML
I want the stock chart to start from Xday to yDay
Try to set the minimum and maximum value of the axis.
https://api.highcharts.com/highstock/xAxis.max
https://api.highcharts.com/highstock/xAxis.min

Live demo:
https://jsfiddle.net/BlackLabel/rp4bg8aq/

Please keep me in the loop.
Best regards.
Sebastian Hajdus
Highcharts Developer
tndev
Posts: 9
Joined: Tue May 05, 2020 9:56 pm

Re: Highcharts Stock problem in rtl language

one more question why the tooltip went blur when i set useHTML to true and outside to true i need them both first one for the rtl language the second one i have some text rendered inside the chart and i need the tooltip always to be on the top of the text it seems you have the same effect on your jsfiddle , is that a bug ? . and by the way , rangeSelectorInout doesnt change the direction it is still in the same direction ltr is there any work around ? . anyways thanks for the fast reply :D.
User avatar
sebastian.h
Posts: 1734
Joined: Fri Aug 07, 2020 7:08 am

Re: Highcharts Stock problem in rtl language

Hi again,

When you use useHTML you indicate the use of css style, see the CSS tab in jsFiddle.
https://api.highcharts.com/highstock/tooltip.useHTML

That documentation says, you need to set tooltip.split to false for charts with multiple line series.
Split the tooltip into one label per series, with the header close to the axis. This is recommended over shared tooltips for charts with multiple line series, generally making them easier to read. This option takes precedence over tooltip.shared.
https://api.highcharts.com/highstock/tooltip.split
i have some text rendered inside the chart and i need the tooltip always to be on the top of the text it seems you have the same effect on your jsfiddle , is that a bug ?
Could you please clarify the question of what do you want to display text or tooltip?
rangeSelectorInout doesnt change the direction it is still in the same direction ltr is there any work around ?
Do you want to achieve something like this example?
https://api.highcharts.com/highstock/ra ... r.floating

Please give me some more explanations and break them down into sentences or points.
It's hard to read a few questions in one sentence, I've lost the context of the sentence, and I don't understand what you mean.

I'm waiting for news from you.
Best regards.
Sebastian Hajdus
Highcharts Developer
tndev
Posts: 9
Joined: Tue May 05, 2020 9:56 pm

Re: Highcharts Stock problem in rtl language

let is take the same example https://jsfiddle.net/synhjrx5/9/ .I rendered a text with the highchart callback function in this example I removed outside true , the text will be shown on the top of the tooltip . When I add the key outside : true to let highcharts create a tooltip outside the chart . the tooltip went blur. it happened to come accross me only when I use stockchart like in this example when i added outside true along side with useHTML : true https://jsfiddle.net/synhjrx5/10/.
here is a simple highcharts with outside : true and useHTML : true inside the tooltip https://jsfiddle.net/synhjrx5/17/ everything here works fine .
thanks again for your reply and happy coding :D
User avatar
sebastian.h
Posts: 1734
Joined: Fri Aug 07, 2020 7:08 am

Re: Highcharts Stock problem in rtl language

Hi,

Thanks for explanation.
When I add the key outside : true to let highcharts create a tooltip outside the chart . the tooltip went blur. it happened to come accross me only when I use stockchart like in this example when i added outside true along side with useHTML : true
This behaviour look's like a bug, give me more time I will try to debug this.

Regards.
Sebastian Hajdus
Highcharts Developer
tndev
Posts: 9
Joined: Tue May 05, 2020 9:56 pm

Re: Highcharts Stock problem in rtl language

thanks for ur time
User avatar
sebastian.h
Posts: 1734
Joined: Fri Aug 07, 2020 7:08 am

Re: Highcharts Stock problem in rtl language

Hi,

Yes it's definitly bug, after test we have seen that the tooltip was shadowing, when we set options in combination split, outside, useHTML.

Code: Select all

  tooltip: {
    outside: true,
    useHTML: true,
    split: true
  },

Are you interested in tracking down this issue, let you know when I report it on GitHub?

​If you have further inquiries, you may reach out to me at any time.
Kind regards.
Sebastian Hajdus
Highcharts Developer
User avatar
sebastian.h
Posts: 1734
Joined: Fri Aug 07, 2020 7:08 am

Re: Highcharts Stock problem in rtl language

This is a GitHub issue that you can track.
https://github.com/highcharts/highcharts/issues/15018
Sebastian Hajdus
Highcharts Developer
tndev
Posts: 9
Joined: Tue May 05, 2020 9:56 pm

Re: Highcharts Stock problem in rtl language

hello sebastien, this is fantastic but I was able to work around it I removed the tooltip shadow and I make it all transparent to make the html tooltip look good. thanks anyways
User avatar
sebastian.h
Posts: 1734
Joined: Fri Aug 07, 2020 7:08 am

Re: Highcharts Stock problem in rtl language

Hi tndev,
You're welcome! :)
Sebastian Hajdus
Highcharts Developer

Return to “Highcharts Stock”