Hi team,
I am trying to create a custom component based on ApexCharts library. Viewing the material we have about the topic I came with the following code.
import React, { useState } from "react";
import Chart from "./lib/react-apexcharts/node_modules/react-apexcharts/src/react-apexcharts.jsx";
function App({ component }) {
const [options, setOptions] = useState({
chart: {
id: "basic-bar"
},
xaxis: {
categories: component.categories
}
});
const [series, setSeries] = useState([
{
name: component.name,
data: component.data
}
]);
return (
<div className="app">
<div className="row">
<div className="mixed-chart">
<Chart options={options} series={series} type={component.type} width={component.width} />
</div>
</div>
</div>
);
}
export default App;
I have linked “categories”, “type”, “seriesName” and “width” in the properties tab of the custom component builder and seems to be working. However, “data” is not getting passed in to the page once I load it. The console is displaying that “data is undefined”. So far, the config in properties I am using is the following:
Categories:
Reference in Code: categories
Value type: JSON
Default value: [ { “categories”: [1991, 1992, 1993, 1994, 1995, 1996, 1997, 1998, 1999] }]
Type
Reference in Code: type
Value type: Select
Default value: line
Type
Reference in Code: type
Value type: Select
Default value: line
Width
Reference in Code: width
Value type: number
Default value: 500
Width
Reference in Code: width
Value type: number
Default value: 500
Name
Reference in Code: name
Value type: text
Default value: series 1
Data
Reference in Code: data
Value type: JSON
Default value: [{ “data”: [30, 40, 45, 50, 49, 60, 70, 91]}]
I am wondering what I am missing here, and this may be a very small detail in the code. I have tried different versions with {useState} and without the hook, but I am still not being able to get the data to populate the charts.
I would highly appreciate any suggestion.
My application ID is the following in case you need to take a look:3C3C18D3-7C64-9678-FFD9-EBB40D336C00
Thanks a lot,
Regards,
Cristian