Getting the mentioned error when i try to render a apexchart chart from a json api

also the chart is not rendered in its div

console error

json api link
https://syed1ahmed.github.io/stage-gear/api.json

apex chart chart configs

var ChartOptions = {
    series: [],
    noData: {
        text: 'Loading...'
    },
    chart: {
        type: 'bar',
        height: 300,

    },
    colors: 'blue',

    plotOptions: {
        bar: {
            horizontal: !1,
            dataLabels: {
                position: 'top',
            },
        }
    },
    dataLabels: {
        enabled: !1,
        offsetX: -6,
        style: {
            fontSize: '12px',
            colors: ['#fff']
        }
    },
    stroke: {
        show: true,
        width: 1,
        colors: ['#fff']
    },
    tooltip: {
        shared: true,
        intersect: false
    },
    yaxis: {
        forceNiceScale: true,
        labels: {
            show: false,

        }

    },
    grid: {
        show: true,
        borderColor: '#90A4AE',
        strokeDashArray: 0.5,
        position: 'back',
        xaxis: {
            lines: {
                show: false
            }
        },

        row: {
            colors: 'red',
            opacity: 0.2
        },

    },

    xaxis: {
        type : 'catagory',
        
        labels: {
            show: false,
            rotate: 180,
            
        }

    }

};

var chart = new ApexCharts(document.querySelector("#chart"), ChartOptions);
chart.render();


const url = 'https://syed1ahmed.github.io/stage-gear/api.json';

$.getJSON(url, function (response) {
    chart.updateSeries([{
        name: 'monthly Volume In USD',
        data: response
    }])

});

code pen reproducing the problem faced https://codepen.io/syed1ahmed/pen/eYrmzPO

can someone please solve this bug

Thanks

CodePudding user response：

You can't just throw whole response to data, it has to be in a form apexcharts can understand. When you map data to array like this, chart will renders.

chart.updateSeries([{
    name: 'monthly Volume In USD',
    data: response.data.map((val) => val.volume)
}])

And if you want dates as categories updateOptions like this

chart.updateOptions({
  series: [
    {
      name: "monthly Volume In USD",
      data: response.data.map((val) => val.volume)
    }
  ],
  xaxis: {
    categories: response.data.map((val) => val.date)
  }
});