Hey guys, I’m trying to use ApexCharts following some tutorials I saw about other custom charts but is not working. Anybody knows how can I do this? Thank you in advance.
This is the chart I want to implement: Custom Angle Circle Chart in React – ApexCharts.js
You’d need to embed the library and do the whole setup probably. Or Custom Coded Components
Agreed.
ApexCharts seem to have a Vue wrapper so you could build a custom coded component. Docs here.
Or you could use our npm plugin to install the apexcharts library like I did here:
In the example above, I followed these steps:
chart) as described in this Codepen, referenced in this ApexCharts article
options variable in WeWeb with the values from the above-mentioned ApexCharts article
var chart = new ApexCharts(document.querySelector("#chart"), options);
chart.render();
Except that instead of writing options, I bound to my options variable:
This is part of the JS that’s referenced at the end of the above-mentioned Codepen.
In WeWeb, I kept just this part because I created the options variable separately.
It was a bit tedious and I’m sure I would need to dig further in the ApexCharts docs if I wanted to do something more elaborate but it works 
Does that help?
Awesome thank you so much for the guide Joyce, I’ll try this
Something I’m trying to figure out right now is how to update the dataset of the chart with a function? I tried the one on the documentation but doesn’t update the dataset, remains the same.
function updateChartById(chartId, newOptions) {
// Get the chart instance by its ID
var chart = ApexCharts.getChartByID(chartId);
if (chart) {
// Update the chart if found
chart.updateOptions(newOptions, true, true);
console.log('Chart updated successfully');
} else {
console.error('Chart not found with ID:', chartId);
}
}
// Usage:
updateChartById("chart", variables['7210b5d5-d881-43ae-97f1-798e86825712']);
I would appreciate a lot some help here
I think you should use custom components, otherwise you’ll be fighting the WeWeb on the frontend, and it will take you a ton of time. Trust me
Hi Broberto! Can you elaborate more on this? Is this now a custom component approach?
You can simply create a custom coded component with the code of your ApexChart, do you have something in particular you’d like to know?
Calling the Weweb masters here @dorilama @raydeck do you guys know what would be the best way to achieve this? the chart creation is working, but I’m not able to update the dataset
If you want to update the chart each time the data changes. You need to wrap it in a reusable component and call your update function (redraw it) on variable change. There is an event for that, within the reusable component. You can even set the desired variable you want to listen to.
Ahh got it, so instead of having the action on page load, I would have it on component mount, so I can reset the component every time the data changes?
Component mount and property change*