Background of the issue:
I am trying to insert graphs with shortcodes on my blog. These shortcodes generate images. On the English version of my blog, they work well, but on some translated versions, the translation stops after the graph. Example of a shortcode: [bar-graph title="Fees of brokers in Switzerland" ytitle="Transaction Fee (CHF)" xtitle="Operation" legends="PostFinance,Migros,Cornèrtrader,Swissquote,Saxo,DEGIRO,Interactive Brokers"]{"legend_position":"middle","labels":["10 CHSPI","100 CHSPI","10 NOVN","100 NOVN","10 MSFT","100 MSFT"],"series":[[25,50,15,35,35,70],[40,40,40,40,40,40],[9,18,9,11,18,38],[9,9,20,30,25,80],[3,12,3,6.5,2.1,21.9],[3,3,6,6,2,2],[5,5,5,5,0.35,0.35]]}[/bar-graph]. Link to a page where the issue can be seen: hidden link
Symptoms:
The translation stops entirely after the graph generated by the shortcode. The shortcode arguments are translated properly, but any text after the shortcode is not translated. If I remove the shortcode and update the translation, the problem goes away.
Questions:
What can I do to avoid this bug from happening?
Is it because there are some brackets inside the shortcode itself?
It does seem like this is related to the brackets ([]) inside the shortcode itself. If I replace the brackets with | instead, the issue does not appear. So, it seems that WPML is stuck if there are some combinations of brackets inside shortcodes.