First of all, thanks a lot for reading me, spending time on my problem and helping me !
I want to add a group of rectangle in the highcharts SVG object, like this :
https://drive.google.com/file/d/1m-a0rR ... sp=sharing
The positions of the rectangles are calculated on the servers, and received by AJAX request under HTML format :
Code: Select all
<g class="highcharts-operations" data-z-index="7">
<rect class="navigator-operations" x="57.368094351335%" y="80%" width="0.32216014897579%" height="10" style="fill: rgb(175, 0, 124); opacity: 0.5;"></rect>
<rect class="navigator-operations" x="10%" y="80%" width="4.591351127664%" height="10" style="fill: rgb(175, 0, 124); opacity: 0.5;"></rect>
<rect class="navigator-operations" x="40.525553486447%" y="80%" width="1.576660459342%" height="10" style="fill: rgb(175, 0, 124); opacity: 0.5;"></rect>
<rect class="navigator-operations" x="57.920546244569%" y="80%" width="0.014380302089799%" height="10" style="fill: rgb(175, 0, 124); opacity: 0.5;"></rect>
<rect class="navigator-operations" x="10%" y="80%" width="3.0525553486447%" height="10" style="fill: rgb(175, 0, 124); opacity: 0.5;"></rect>
<rect class="navigator-operations" x="39.404096834264%" y="80%" width="2.1832195323815%" height="10" style="fill: rgb(175, 0, 124); opacity: 0.5;"></rect>
<rect class="navigator-operations" x="62.594661700807%" y="80%" width="4.1674943099524%" height="10" style="fill: rgb(175, 0, 124); opacity: 0.5;"></rect>
<rect class="navigator-operations" x="89.562383612663%" y="80%" width="1.4917235671426%" height="10" style="fill: rgb(175, 0, 124); opacity: 0.5;"></rect>
<rect class="navigator-operations" x="99.875853507138%" y="80%" width="0.2991930477964%" height="10" style="fill: rgb(175, 0, 124); opacity: 0.5;"></rect>
<rect class="navigator-operations" x="89.810676598386%" y="80%" width="0.039416511483551%" height="10" style="fill: rgb(175, 0, 124); opacity: 0.5;"></rect>
<rect class="navigator-operations" x="89.562383612663%" y="80%" width="1.8388164701014%" height="10" style="fill: rgb(175, 0, 124); opacity: 0.5;"></rect>
<rect class="navigator-operations" x="99.275812124974%" y="80%" width="0.024001655286571%" height="10" style="fill: rgb(175, 0, 124); opacity: 0.5;"></rect>
</g>
So I .append() the result in the SVG Object created by HighCharts :
Code: Select all
<svg version="1.1" class="highcharts-root" xmlns="http://www.w3.org/2000/svg" width="1715" height="400" viewBox="0 0 1715 400">
But, no functionnality works anymore : no tooltip, no cursor, the time navigator doesn't work, etc..
So my questions are :
-How can I reload the JS code linked to the chart, is it possible ?
-Or, anyone knows how to insert SVG group in the HighCharts SVG Object ?
Best regards,
Nicolas