Why is chart-data not showing?

Question

Why is chart-data not showing?

I pass to the "data" array But it does not show anything ... But if you make data, then everything will work

My data

Default data

My files (income) Dashboard > DashboardView > Charts https://codesandbox.io/s/hopeful-glitter-c868j

 // Charts.js const [chartOptions, setChartOptions] = useState({ options: { chart: { id: "basic-bar" }, xaxis: { categories: moment.monthsShort() } }, series: [ { name: "Доход", data: [incomeData] // My data - console.log(incomeData) - 4 } ] });

Answer 1

Change your code to have only one state object and don't nest different states like you are currently. Remove the data: [incomeData] and use a single state object to manage the chart state.

Something like this:

 import React, { useState, useEffect } from "react"; import Chart from "react-apexcharts"; import moment from "moment"; import "moment/locale/ru"; const ChartsView = props => { const { income } = props; const [chartOptions, setChartOptions] = useState({ options: { chart: { id: "basic-bar" }, xaxis: { categories: moment.monthsShort() } }, series: [ { name: "Доход", data: [] } ] }); const handleData = (dataFeed) => { const formattedDataFeed = 'format the data ready for the chart' setChartOptions({ ...chartOptions, series: [{ name: chartOptions.series[0].name, data: [ { ...chartOptions.series[0].data }, { ...formattedDataFeed } ] }] }) } return ( <Chart options={chartOptions.options} series={chartOptions.series} type="area" width="100%" height="400px" /> ); }; export default ChartsView;

You were changing the state of the incomeData and this was not changing any state associated with the <Chart /> . You need to change the state associated with the <Chart /> so the chartOptions .

I hope that works and helps?