# Examples using Apexcharts with uibuilder
**URL:** https://discourse.nodered.org/t/examples-using-apexcharts-with-uibuilder/67827
**Category:** Dashboard
**Tags:** uibuilder
**Created:** [16 September 2022 21:29 UTC](https://discourse.nodered.org/t/examples-using-apexcharts-with-uibuilder/67827 "2022-09-16T21:29:14Z")
**Posts on this page:** 6
**Page:** 1
### Author:  [@OscarF](https://discourse.nodered.org/u/OscarF)
#### Post date: [16 September 2022 21:29 UTC](https://discourse.nodered.org/t/examples-using-apexcharts-with-uibuilder/67827/1 "2022-09-16T21:29:14Z")
Hi!
I installed the uibuilder to use apexcharts in node red, but when I try to implement the example on node red, I only get the title, no the chart. The example is [this](https://github.com/TotallyInformation/node-red-contrib-uibuilder/wiki/Integrating-ApexCharts-with-VueJS).
---
### Author:  [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)
#### Post date: [17 September 2022 13:00 UTC](https://discourse.nodered.org/t/examples-using-apexcharts-with-uibuilder/67827/2 "2022-09-17T13:00:17Z")
I have just tested that code with the latest version of node-red and it appears to be working fine. Can you please share your html and js code?
---
### Author:  [@OscarF](https://discourse.nodered.org/u/OscarF)
#### Post date: [19 September 2022 15:12 UTC](https://discourse.nodered.org/t/examples-using-apexcharts-with-uibuilder/67827/3 "2022-09-19T15:12:11Z")
Yes, here is the js code:
```auto
Vue.component('apexchart', VueApexCharts)
// eslint-disable-next-line no-unused-vars
var app1 = new Vue({
el: '#app',
data: {
startMsg : 'Vue has started, waiting for messages',
// Data for bar chart
options: {
chart: {
id: 'vuechart-example'
},
xaxis: {
categories: [1991, 1992, 1993, 1994, 1995, 1996, 1997, 1998]
}
},
series: [{
name: 'series-1',
data: [30, 40, 45, 50, 49, 60, 70, 91]
}],
// Data for donut chart
doptions: {},
dseries: [44, 55, 41, 17, 15]
}, // --- End of data --- //
computed: {
}, // --- End of computed --- //
methods: {
}, // --- End of methods --- //
// Available hooks: init,mounted,updated,destroyed
mounted: function(){
/ **** REQUIRED** Start uibuilder comms with Node-RED @since v2.0.0-dev3
* Pass the namespace and ioPath variables if hosting page is not in the instance root folder
* e.g. If you get continual `uibuilderfe:ioSetup: SOCKET CONNECT ERROR` error messages.
* e.g. uibuilder.start('/nr/uib', '/nr/uibuilder/vendor/socket.io') // change to use your paths/names
*/
uibuilder.start()
var vueApp = this
// Process new messages from Node-RED
uibuilder.onChange('msg', function (newVal) {
if ( typeof newVal.payload === 'number' ){
// Add new element
vueApp.dseries.push(newVal.payload)
// Lose the first element
vueApp.dseries.shift()
//console.log(vueApp.dseries)
}
})
} // --- End of mounted hook --- //
}) // --- End of app1 --- //
// EOF
```
and this is the html code:
```auto
ApexChart/VueJS Example - Node-RED UI Builder
Examples of using ApexChart
with uibuilder, VueJS and bootstrap-vue
```
I only get this on the chart page:
---
### Author:  [@UnborN](https://discourse.nodered.org/u/UnborN)
#### Post date: [19 September 2022 16:43 UTC](https://discourse.nodered.org/t/examples-using-apexcharts-with-uibuilder/67827/4 "2022-09-19T16:43:58Z")
You code example works fine for me ..
Are you sure you installed the correct **Vue 2** version that is needed for the apexchart library ?
Its a common mistake that people install the Vue 3 library instead for either bootstrap-vue or apexcharts in this case this is not supported.
---
### Author:  [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)
#### Post date: [19 September 2022 19:30 UTC](https://discourse.nodered.org/t/examples-using-apexcharts-with-uibuilder/67827/5 "2022-09-19T19:30:12Z")
OK, you should check your browser's dev console for errors. As Andy has suggested, I suspect you've loaded Vue v3 rather than v2 and the fact that your browser window hasn't centred the title with a white background shows that bootstrap-vue is not loaded.
---
### Author:  [@system](https://discourse.nodered.org/u/system)
#### Post date: [19 October 2022 19:30 UTC](https://discourse.nodered.org/t/examples-using-apexcharts-with-uibuilder/67827/6 "2022-10-19T19:30:58Z")
This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.