NPM 'react-apexcharts' not updating properly
I am using demo4 react version Metronic . While using react-apex charts for updating real-time data.it is not properly updating. That is horizontal movement is missing. pls give full code for real-time updating data.
x-axis - time and y-axis -temperature .
In each 1 second a new array of time and temperature come, that need to be updated in chart with that horizontal movement.
Replies (5)
Hi,
Thank you for reaching out to us.
Could you please specify which widget in demo4 you are using?
Typically, in our chart widgets, we have a refreshChart function that you can use to update your chart. Simply update the series configuration property and call refreshChart to refresh the chart data.
Regards,
Lauris Stepanovs,
Keenthemes Support Team
I am using chartwidget3 with data real-time updating.
Hi,
In ChartWidget3.tsx you should update series object data in function getChartOptions.
series: [
{
name: "Net Profit",
data: [30, 40, 40, 90, 90, 70, 70],
},
],Then you can rerender your chart with the code below:
const chart = new ApexCharts(chartRef.current, getChartOptions(height))
if (chart) {
chart.render()
}Regards,
Lauris Stepanovs,
Keenthemes Support Team
'https://apexcharts.com/react-chart-demos/line-charts/realtime/'.I need like this above URL with real-time updating.so pls give me code for that.
Hi,
Sorry for the late reply.
Unfortunately, at the moment, we don't have an example with realtime data update.
In our theme, we initialize our widgets using the plain JavaScript ApexCharts plugin. The example you're referring to uses React-Apexcharts. For a plain JavaScript example, you can refer to this example.
You can update data using the code below:
chart.updateSeries([{
data: data
}])Regards,
Lauris Stepanovs,
Keenthemes Support Team
