# Uibuilder charts doesn't show on mobile devices

**URL:** <https://discourse.nodered.org/t/uibuilder-charts-doesnt-show-on-mobile-devices/41834>\
**Category:** General\
**Created:** [1 March 2021 16:22 UTC](https://discourse.nodered.org/t/uibuilder-charts-doesnt-show-on-mobile-devices/41834 "2021-03-01T16:22:31Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![SeRiusRod](https://avatars.discourse-cdn.com/v4/letter/s/278dde/32.png) [@SeRiusRod](https://discourse.nodered.org/u/SeRiusRod)\
**Post date:** [1 March 2021 16:22 UTC](https://discourse.nodered.org/t/uibuilder-charts-doesnt-show-on-mobile-devices/41834/1 "2021-03-01T16:22:31Z")

</div>

I've tried with the echarts and apexcharts examples, so far on chrome and firefox. It shows an empty area where the charts should be located. Is this normal, like some rendering component missing on mobile phones or should I add something missing in the code?

---

<div class="post-metadata">

**Author:** ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)\
**Post date:** [1 March 2021 20:44 UTC](https://discourse.nodered.org/t/uibuilder-charts-doesnt-show-on-mobile-devices/41834/2 "2021-03-01T20:44:26Z")

</div>

Are you loading the libraries from a CDN or from an installed copy (via the uibuilder library manager)?

---

<div class="post-metadata">

**Author:** ![SeRiusRod](https://avatars.discourse-cdn.com/v4/letter/s/278dde/32.png) [@SeRiusRod](https://discourse.nodered.org/u/SeRiusRod)\
**Post date:** [1 March 2021 23:07 UTC](https://discourse.nodered.org/t/uibuilder-charts-doesnt-show-on-mobile-devices/41834/3 "2021-03-01T23:07:14Z")

</div>

The problem happens with the samples as they are in the wiki. I simply import the json and c&p the html and js files.  
So charting libs are loaded via cdn.

But i I'm starting to think that is something with the vue layout in the html. I created an independent vue project with the charts and they show in the phone.

---

<div class="post-metadata">

**Author:** ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)\
**Post date:** [2 March 2021 12:49 UTC](https://discourse.nodered.org/t/uibuilder-charts-doesnt-show-on-mobile-devices/41834/4 "2021-03-02T12:49:00Z")

</div>

OK, thanks for looking. I only quickly knocked together those examples. I haven't tested them on mobile devices.

If you find out what's wrong and can fix them, it would be fabulous and I will update the WIKI.

---

<div class="post-metadata">

**Author:** ![SeRiusRod](https://avatars.discourse-cdn.com/v4/letter/s/278dde/32.png) [@SeRiusRod](https://discourse.nodered.org/u/SeRiusRod)\
**Post date:** [2 March 2021 13:07 UTC](https://discourse.nodered.org/t/uibuilder-charts-doesnt-show-on-mobile-devices/41834/5 "2021-03-02T13:07:25Z")

</div>

I don't know what to do with this. I'm having hard times trying to build a simple example in a new Vue project. In uibuilder I forced versions that doesn't seem to work when downloaded through npm.  
Then the import/invoke mechanisms shown on samples over inet doesn't work anymore. I think these people have messed up the compatibility when upgrading to vue-echarts@6.0.0-\*.

---

<div class="post-metadata">

**Author:** ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)\
**Post date:** [2 March 2021 13:18 UTC](https://discourse.nodered.org/t/uibuilder-charts-doesnt-show-on-mobile-devices/41834/6 "2021-03-02T13:18:07Z")

</div>

> [@SeRiusRod](#):
>
> In uibuilder I forced versions that doesn't seem to work when downloaded through npm.

Unfortunately, you can only do that from the command line, not currently from the uibuilder library manager. You can manually edit the module list to add modules that you installed via the command line. Have a look in `~/.node-red/uibuilder/.config/packageList.json`. You don't need the `@` version bit on the url's if using your own npm installed package.

---

<div class="post-metadata">

**Author:** ![SeRiusRod](https://avatars.discourse-cdn.com/v4/letter/s/278dde/32.png) [@SeRiusRod](https://discourse.nodered.org/u/SeRiusRod)\
**Post date:** [2 March 2021 14:00 UTC](https://discourse.nodered.org/t/uibuilder-charts-doesnt-show-on-mobile-devices/41834/7 "2021-03-02T14:00:16Z")

</div>

It's not an uibuilder problem. It seems that they messed the packages dependencies. Between echarts, vue-echarts, vue and composition-api.

ApexCharts worked at the first try. And it shows on mobile devices. (on an external Vue project) What seems to confirm my above thoughts.

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/d/f/df2fa528d8de8c80bc3e33e30d74652300be17ac.png)

I'll check again apexcharts on uibuilder, if they render on mobile devices.

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/d073cd938eafa2e558d7c2cd59003b3ef4963033.png) [@system](https://discourse.nodered.org/u/system)\
**Post date:** [1 May 2021 14:00 UTC](https://discourse.nodered.org/t/uibuilder-charts-doesnt-show-on-mobile-devices/41834/8 "2021-05-01T14:00:19Z")

</div>

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.