TypeError: Cannot read property 'ToString' of undefined when bar chart is rendering with data.

[JCFalter]

Codepen: https://codepen.io/jfalter/pen/rNedKOw

Whenever I attempt to render a bar chart with data, I get the following error message:

Uncaught (in promise) TypeError: Cannot read property 'toString' of undefined at Function.value (apexcharts:6 at t.value (apexcharts:6) at t.value (apexcharts:6) at t.value (apexcharts:14) at t.create (apexcharts:6) at apexcharts:14 at new Promise (<anonymous>) at t.value (apexcharts:14) at apexcharts:6 at Array.forEach (<anonymous>)

When I look at the Apexcharts Javascript file, I see this throwing an error:

key: "escapeString", value: function(t) { var e = arguments.length > 1 && void 0 !== arguments[1] ? arguments[1] : "x" , i = t.toString().slice(); //This is what's throwing the error. return i = i.replace(/[` ~!@#$%^&*()_|+-=?;:'",.<>{}[]\/]/gi, e) }

Note that it works fine if I render with empty data and category arrays.

[maxi512]

I have the same error! I thought that I was the only one.

[junedchhipa]

Thanks for reporting. It's a major bug and I had to immediately release a patch version as this might have broken many existing charts.

Please upgrade to v3.20.2

[JCFalter]

Works now! Thanks!

[RaviganeshR]

Thanks.it's working.

[MohammadMerhi]

Upgraded to v3.20.2 Still showing ERROR Error: Uncaught (in promise): TypeError: Cannot read property 'toString' of undefined TypeError: Cannot read property 'toString' of undefined

[junedchhipa]

@MohammadMerhi Can you create a Codepen?

[Lucascoorek]

Had this error when trying to add undefined value to label. Label has to be a string.

[NAVIKNITIN]

occuring same problem of undefined.

[Saicasm]

Any update on this ?

[swasti4evrurs]

Getting the same error when giving dynamic height to chart . "Unhandled Promise rejection: Cannot read properties of undefined (reading 'toString') ; Zone: ; Task: Promise.then ; Value: TypeError: Cannot read properties of undefined (reading 'toString')"

[ArtemKoshevoi]

In my case I've added field width and error is gone

    <Chart
      height={420}
      width={700}
      options={options}
      series={series}
      type="area"
    />

[wrappixelTeam]

In my case I've added field width and error is gone

    <Chart
      height={420}
      width={700}
      options={options}
      series={series}
      type="area"
    />

How to make it responsive with the fixed width?

[tonyjara]

What solved it for me was having the width in numbers rather than using strings.

[jsvelte]

it's truly is width is required! but not included in the docs

[mateusabelli]

In my case I've added field width and error is gone

    <Chart
      height={420}
      width={700}
      options={options}
      series={series}
      type="area"
    />

How to make it responsive with the fixed width?

I've managed to use it with width: "100%". It seems to both fix that TypeError: Cannot read property 'ToString' of undefined, and keep my graph responsive.

[cassioseffrin]

@mateusabelli your workaround have worked 100% !

[hmtcelik]

if someone still looking here, yo should also give height prop:

      <ApexChart
        options={options}
        series={series}
        type="pie"
        width={500}
        height={320} // after adding height, its working now
      />

[Joginder462]

adding width will solve problem <ReactApexChart options={options} series={state.series} width={"100%"} height={300} type="donut" />

[MatheusEli]

@Joginder462 your solution have worked for me! Thanks!

[Capta1nRaj]

In my case I've added field width and error is gone

    <Chart
      height={420}
      width={700}
      options={options}
      series={series}
      type="area"
    />

Buddy, thank you very much, I was harassed by this bug for past 6 hours.

[Joginder462]

In my case I've added field width and error is gone

    <Chart
      height={420}
      width={700}
      options={options}
      series={series}
      type="area"
    />

Buddy, thank you very much, I was harassed by this bug for past 6 hours.

same I had faced

[fayizIT]

<ReactApexChart series={chartSeries} options={revenueChartOptions} type="area" height={325}
width={700}/> after adding width , its working now

[Vituli]

return <Chart options={chartOptions} series={chartSeries} type="pie" width="500" />;

I also try to add width but still get error when i hover on the labels

I am using "react-apexcharts": "^1.4.1",

[Capta1nRaj]

return <Chart options={chartOptions} series={chartSeries} type="pie" width="500" />;

I also try to add width but still get error when i hover on the labels

Remove the build folder, & retry to build please.

[Vituli]

return <Chart options={chartOptions} series={chartSeries} type="pie" width="500" />; I also try to add width but still get error when i hover on the labels

Remove the build folder, & retry to build please.

No work...

[necipsunmaz]

return <Chart options={chartOptions} series={chartSeries} type="pie" width="500" />;

I also try to add width but still get error when i hover on the labels

I am using "react-apexcharts": "^1.4.1",

I have tried adjusting to width and all other solutions but it doesn't work. When I downgraded the Apexchart version to “3.44.0” it worked fine. I think this bug reappeared in newer versions.

Solution: Downgrade Apexchart version to version “3.44.0” (make sure it is not “^3.44.0”).

[tad27]

return <Chart options={chartOptions} series={chartSeries} type="pie" width="500" />; I also try to add width but still get error when i hover on the labels I am using "react-apexcharts": "^1.4.1",

I have tried adjusting to width and all other solutions but it doesn't work. When I downgraded the Apexchart version to “3.44.0” it worked fine. I think this bug reappeared in newer versions.

Solution:

Downgrade Apexchart version to version “3.44.0” (make sure it is not “^3.44.0”).

Thanks a lot. 3.44.0 worked for me