search

highcharts / highcharts-vue

Other
686 stars 150 forks source link

highcharts-vue mobile legends error #113

Closed kzthet194 closed 4 years ago

kzthet194 commented 5 years ago

Hi Team,

We set scrollable chart and move Legend to bottom from right side on mobile. When we update the series data on mobile Legend Data Render is different from preload state and updated series. In the pre-load state, legend-html is render in 'highcharts-fixed' div. When we update the series, the legend-html is render in 'highcharts-scrolling' div and there is no legend-html data in 'highcharts-fixed' div.

Do you have any suggestion for this issue? Thank you!

Denyllon commented 5 years ago

Hi @kzthet194 ,

Could you provide me with some minimal example where the issue is noticeable? It would be much easier to solve it and find the source of the problem. You can use any of most common sandboxes like Codesandbox, or Stackblitz.

Kind regards!

kzthet194 commented 5 years ago

Hi @Denyllon ,

Thanks for your reply. According to your request, I put my example codes to Codesandbox (https://codesandbox.io/s/codesandbox-nuxt-797nm). From there, I created charts.vue under pages. What my requirement is want to highlight some area as the default with plotBands and after user update data from the dropdown which located above of the chart, and then update plotBands area depend on the data what user changed from the dropdown. Actually, that one is not my issue, it's working well with my codes. the issue that I facing is I can't detect the 'highchart-legent' div's data. From the first load, '.highcharts-legend' is located under '.highcharts-fixed' as my following screenshot.

image

After user update the select input and redraw the graph for update plotBands, that '.highcharts-legend' is moved under '.highcharts-scrolling'

image

The reason why I want to track '.highcharts-legend' is coz of my styling purpose. Can you help me with this? Thanks in Advance!!

Denyllon commented 5 years ago

Thank you for sending additional info. Unfortunately the link from your last comment does not refer the example where the described problem would be noticeable. There is no any chart rendered on the page, so could you take a look on it once again, and provide me with working one?