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.


Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(

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


Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(
Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(

React Dev Vacancy

KeenThemes is looking for a Junior React or Vue developer to build awesome apps.
Apply
keenthemes mega bundle