[BUG] - Chart not rendered properly when using dynamic data

[sujit-baniya]

Video of bug: https://www.loom.com/share/8224f404e44f44508e5533bd37935a99

Code:

<StackedAreaChart series={queuedMessages} colors={['#008FFB', '#00E396', '#CED4DC']} dataOptions={{title: "Queued Messages", xaxis:{type:"datetime"}, yaxis:{type:"number"}}} height={300}/>

import React from 'react';
import ReactApexChart from 'react-apexcharts';

export const StackedAreaChart = ({series, height, colors, dataOptions}) => {
    let options = {
        chart: {
            type: 'area',
            height: height,
            stacked: true,
            events: {
                selection: function (chart, e) {
                    console.log(new Date(e.xaxis.min));
                }
            }
        },
        colors: colors,
        dataLabels: {
            enabled: false
        },
        stroke: {
            curve: 'smooth'
        },
        fill: {
            type: 'gradient',
            gradient: {
                opacityFrom: 0.6,
                opacityTo: 0.8
            }
        },
        legend: {
            position: 'top',
            horizontalAlign: 'left'
        }
    };
    if (dataOptions.hasOwnProperty('title')) {
        options.title = {text: dataOptions.title}
    }
    if (dataOptions.hasOwnProperty('xaxis')) {
        options.xaxis = dataOptions.xaxis
    }
    if (dataOptions.hasOwnProperty('yaxis')) {
        options.yaxis = dataOptions.yaxis
    }
    return (
        <div>
            <ReactApexChart options={options} series={series} type="area" height={height}/>
        </div>
    );
};

[vamsikrishnareddy22]

Hello @sujit-baniya any update, I am also facing same issue :)

[sujit-baniya]

@vamsikrishnareddy22 I was not able to work with bug so I am currently using different chart library

[vamsikrishnareddy22]

@sujit-baniya can you suggest the package to me

[sujit-baniya]

https://recharts.org/en-US/

[vamsikrishnareddy22]

thank you @sujit-baniya