Search code examples
javascriptjqueryapexcharts

t.substring is not a function in ApexCharts

Porridge everyone, I got a bug in ApexCharts. Who knows what this is wrong? Thanks!

My Code:

// Option Chart
var options = {
          series: 
          [ 
            {
              name: 'Operating',
              data: [1785, 1661, 1663, 1653, 1882, 1725, 6153, 1153, 6153, 6153, 6153, 1653, 1153, 1663, 1661]
            }, {
              name: 'Stopping',
              data: [4072, 0, 0, 0, 248, 2534, 8533, 0, 0, 0, 0, 0, 0, 0, 0]
            }, {
              name: 'Error',
              data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
            },{
              name: 'No Sign',
              data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
            }
          ],  
          chart: {
          type: 'bar',
          height: heightChart,
          stacked: true,
          stackType: '100%'
          },
          responsive: [{
            breakpoint: 480,
            options: {
              legend: {
                position: 'bottom',
                offsetX: -10,
                offsetY: 0
              }
            }
          }],
          xaxis: {
            labels: {
              style: {
                colors: [],
                fontSize: '15px',
                fontFamily: 'Helvetica, Arial, sans-serif',
                fontWeight: 400,
                cssClass: 'apexcharts-xaxis-label',
              }
            },
          },
          yaxis: {
            labels: {
              style: {
                colors: [],
                fontSize: '15px',
                fontFamily: 'Helvetica, Arial, sans-serif',
                fontWeight: 400,
                cssClass: 'apexcharts-xaxis-label',
              }
            },
          },
      };
      var chart = new ApexCharts(document.querySelector("#chart"), options);
      chart.render();

This Is Error:

enter image description here

I tried to find out about this error, mostly due to data errors. But my data is right. When we replace 0 to 1 this error disappears. And after creating the plot option, the graph generated an error:

plotOptions: {
            bar: {
              columnWidth: '60%',
              colors: {
                ranges: [{
                    from: 0,
                    to: 0,
                    color: ['#0000']
                }],
                backgroundBarColors: [],
                backgroundBarOpacity: 1,
                backgroundBarRadius: 0,
              },
            }
          },
Solution

  • Your code runs fine (produces the result as shown below) and generates no errors on my side.

    Can you check which version of ApexCharts are you using?

    enter image description here