Search code examples
javascriptapexcharts

ApexChart TypeError: "c is undefined" when update chart


I started using ApexChart and it worked fine to create the chart, but it's returning a error "c is undefined" when I try to update the chart.

How I create the chart is below. dates is an array with some dates and values an array with numbers

var options = {
    chart: {
        height: 350,
        type: 'area',
        zoom: {
            enabled: false
        }
    },
    dataLabels: {
        enabled: false
    },
    stroke: {
        curve: 'straight'
    },
    series: [{
        name: "Sales",
        data: values
    }],
    title: {
        text: 'Number os sales',
        align: 'left'
    },
    labels: dates,
    xaxis: {
        type: 'datetime'
    },
    yaxis: {
        opposite: true
    },
    legend: {
        horizontalAlign: 'left'
    }
}
var chart = new ApexCharts(
    document.querySelector("#salesChart"),
    options
)
if (document.getElementById('salesChart')) {
    chart.render();
}

Then, I try to update the chart by:

// Update label
ApexCharts.exec('salesChart', 'updateOptions', {
    xaxis: {
        labels: dates
    }
}, false, true)
// Update values
ApexCharts.exec('salesChart', 'updateSeries', [{
    data: values
}], true);

The update above is called when I set a new values for the arrays dates and values. It's returning the error:

TypeError: "c is undefined"
    getChartByID http://myserver.com/assets/js/vendors/charts/apex-charts.js:27013
    exec http://myserver.com/assets/js/vendors/charts/apex-charts.js:26952

Solution

  • You forgot to give an id to the chart in the options

    var options = {
      chart: {
        id: 'salesChart'
      }
    }
    

    The function ApexCharts.exec only works when you provide a chart ID.