Apexcharts.js: Apexcharts It is a possibility that you may have not included 'data' property in series, Cannot read property 'labels' of undefined

Created on 11 Feb 2020 · 4Comments · Source: apexcharts/apexcharts.js

I get three errors

When the map is rendered for the first time i get:

apexcharts:6 It is a possibility that you may have not included 'data' property in series
apexcharts:6 It is a possibility that you may have not included 'data' property in series

Then each time the map is rendered I get:
Uncaught (in promise) TypeError: Cannot read property 'labels' of undefined

My code:

var options = {
  theme: {
    mode: 'light', 
    palette: 'palette1', 
    monochrome: {
        enabled: false,
        color: '#31a7ec',
        shadeTo: 'light',
        shadeIntensity: 0.65
    }
},
  chart: {
    height: 450,
    type: 'bar',
  },
   plotOptions: {
    bar: {
      horizontal: true,
    }
  },
  dataLabels: {
    enabled: true
  },
  series: [{
    name: "Consumption"
  }],
  title: {
    text: 'AMR Consumption',
  },
  noData: {
    text: 'No Data'
  }
}

var chart = new ApexCharts(
  document.getElementById("AMRbarchart"),
  options
)

// then i do ajax requests and add / destroy the chart

//ajax

  $.getJSON('http://10....',  response => {
                chart.render()

                chart.updateOptions({
                    title: {
                        text: 'Consumption by year (' + unit + ') for ' + feature_name
                    },
                    chart: {
                        height: 380
                    }
                })

                chart.updateSeries([{
                    data: response.yearly
                }])
            })

```

Source

csandreas1

Most helpful comment

As the error suggests, you cannot have a series without a data property. Even if you don't have anything in data, you should pass an empty array

series: [{
  name: "Consumption",
  data: []
}]

junedchhipa on 12 Feb 2020

👍4

All 4 comments

As the error suggests, you cannot have a series without a data property. Even if you don't have anything in data, you should pass an empty array

series: [{
  name: "Consumption",
  data: []
}]

junedchhipa on 12 Feb 2020

👍4

I have same error, what is wrong here? Thanks

<script>

    var options = {
        series: [{
            name: 'istanbul',
            data: [11, 12, 20, 98, 47]
        },
            {
                name: 'izmir',
                data: [21, 19, 80, 18, 47]
            },
            {
                name: 'payas',
                data: [31, 12, 20, 98, 57]
            }],
        chart: {
            id: "Chart1",
            name:"Chart1",
            height: 350,
            type: 'line',
        },
        stroke: {
            width: 7,
            curve: 'smooth'
        },
        xaxis: {
            type: 'category',
            categories: ["2015", "2016", "2017", "2018", "2019"],
            tickAmount: 10 
        },

        fill: {
            type: 'gradient',
            gradient: {
                shade: 'dark',
                gradientToColors: ['#FDD835'],
                shadeIntensity: 1,
                type: 'horizontal',
                opacityFrom: 1,
                opacityTo: 1,
                stops: [0, 100, 100, 100]
            },
        },
        markers: {
            size: 4,
            colors: ["#FFA41B"],
            strokeColors: "#fff",
            strokeWidth: 2,
            hover: {
                size: 7,
            }
        },
        yaxis: {
            min: 10,
            max: 120, 
        }
    };


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

    function Update() { 

        var data1, data2, data3;  

        $.getJSON('Content/ApexData/Test/Veri1.json', function (response) {
            data1= response
        });
        $.getJSON('Content/ApexData/Test/Veri2.json', function (response) {
            data2= response
        }); 
        $.getJSON('Content/ApexData/Test/Veri3.json', function (response) {
            data3= response 
        });

        ApexCharts.exec("Chart1", "updateOptions", {
            series: [{
                name: "istanbul",
                data: data1
            },
            {
                name: "izmir",
                data: data2
            },
            {
                name: "payas",
                data: data3
            }
            ],
            xaxis: {
                categories: ["2015", "2016", "2017", "2018", "2019"]
            }
        }); 
    }

    chart.render();

</script>

<button id="Update" onclick="Update();">Update</button>