Charts with useState of React Hook, does not works

[BrunoMoyses]

Hi, i'm trying use Apexcharts with useState of React Hook, but the data series does not showing up. the chart is rendered without bars and without yaxis labels

this is the component:

import React, { useState } from 'react';

import Apexchart from 'react-apexcharts';

export default function BarChart (props) {
    // initial options
    const initOptions = {
        legend: {
            show: false
        },
        plotOptions: {
            bar: {
                horizontal: true
                colors: {
                    backgroundBarColors: [props.theme],
                    backgroundBarOpacity: 0.2,
                },
                dataLabels: {
                    position: 'top',
                },
                barHeight: '55px',
                columnWidth: 100
            },
            yaxis: {
            }
        },
        stroke: {
            show: true,
            curve: 'smooth',
            lineCap: 'round',
        },
        theme: {
            monochrome: {
                enabled: true,
                color: props.theme,
            },
        },
        grid: {
            yaxis: {
                lines: {
                    show: false,
                }
            },
        },
        xaxis: {
            axisTicks: {
                show: false
            },
            axisBorder: {
                show: false
            },
            labels: {
                show: false,
            },
        },
        yaxis: {
            labels: {
                style: {
                    color: '#3a759c',
                    fontSize: '11px'
                },
                maxWidth: 73,
                formatter: value => (value.length > 13 ? `${value.substring(0, 13)}.` : value),
                offsetX: 7
            },
        },
        dataLabels: {
            style: {
                colors: [props.theme],
                fontSize: '13px',
            },
            dropShadow: {
                enabled: true,
                top: 0,
                left: 0,
                blur: 2,
                opacity: 1
            },
            offsetY: 1,
            offsetX: 18,
        },
        tooltip: {
            theme: 'dark'
        },
    }
    const options = initOptions;
    // getting data from props
    const allData = props.data.map( data => ({
        x: data[0],
        y: data[1]
    }) )
    // series
    const [series, setSeries] = useState([{
        name: 'Agendamentos',
        data: allData.slice(0, 4)
    }])

    return (
        <div style={{width: '100%', paddingLeft: '10px'}}>
            <Apexchart 
                options={options}
                series={series}
                type="bar"
                height={props.height ? props.height : "auto"}
            />
        </div>
    );
}

instantiating the component: <BarChart theme="#D870EB" data={dataList} />

Explanation

• What is the behavior you expect?
• What is happening instead? the chart is rendered without bars and without yaxis labels
• What error message are you getting? no erro

[jsmccrumb]

I noticed the {x, y} format of data for series seemed to not work with bar charts for me, worked for lines. I updated to use xaxis.categories instead.

Not sure if that helps dig into what is going on here or not.

[cstrat]

I have had issues with React if I don't store the options in the react state. This isn't likely your issue but could be causing other problems for you.

So try replacing this: const options = initOptions; with:

const [options, setOptions] = useState(initOptions);

[jaballogian]

@BrunoMoyses

I have tested React-ApexChart components using React Hooks and I worked well.

Here is the example I created using Radar Chart from React-ApexChart.

import React, { useState } from "react";
import ReactApexChart from "react-apexcharts";

const App = () => {
  const seriesArray = [
    {
      name: "Series 1",
      data: [80, 50, 30, 40, 100, 20]
    },
    {
      name: "Series 2",
      data: [20, 30, 40, 80, 20, 80]
    },
    {
      name: "Series 3",
      data: [44, 76, 78, 13, 43, 10]
    }
  ];

  const [series, setSeries] = useState(seriesArray);

  const [options, setOptions] = useState({
    chart: {
      height: 350,
      type: "radar",
      dropShadow: {
        enabled: true,
        blur: 1,
        left: 1,
        top: 1
      }
    },
    title: {
      text: "Radar Chart - Multi Series"
    },
    stroke: {
      width: 2
    },
    fill: {
      opacity: 0.1
    },
    markers: {
      size: 0
    },
    xaxis: {
      categories: ["2011", "2012", "2013", "2014", "2015", "2016"]
    }
  });

  return (
    <div id="chart">
      <ReactApexChart
        options={options}
        series={series}
        type="radar"
        height={350}
      />
    </div>
  );
};

export default App;

and here are the dependencies from package.json file

"apexcharts": "3.16.0",
"react-apexcharts": "1.3.6",
"react": "^16.7.0-alpha.0",
"react-dom": "^16.7.0-alpha.0",
"react-scripts": "2.0.5"

Here is the result

I have attached this example in codesandbox https://codesandbox.io/s/react-basic-example-forked-iwbyy?file=/src/App.js

I think this answer could close this issue @junedchhipa

[github-actions[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.