Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Uncaught (in promise) TypeError: Cannot read properties of null (reading 'elGridBorders') #3472

Closed
pistou opened this issue Nov 4, 2022 · 6 comments
Closed

Uncaught (in promise) TypeError: Cannot read properties of null (reading 'elGridBorders') #3472

pistou opened this issue Nov 4, 2022 · 6 comments
Labels
bug Something isn't working verified

Comments

@pistou
Copy link

pistou commented Nov 4, 2022

Description

When creating a Pie / Donut chart, there is a JS error in the console, at least in Chrome (not tested on other browsers):

apexcharts:14 Uncaught (in promise) TypeError: Cannot read properties of null (reading 'elGridBorders')
at apexcharts:14:39293
at new Promise ()
at t.value (apexcharts:14:38212)
at apexcharts:14:36155
at new Promise ()
at t.value (apexcharts:14:21675)
at pen.js?key=pen.js-e5bd07f8-3986-d368-51d8-6535df40c060:14:7

Steps to Reproduce

  1. Create a basic Pie / Donut chart

Reproduction Link

https://codepen.io/TouPye/pen/KKeMoKq
@pistou pistou added the bug Something isn't working label Nov 4, 2022
@JamieWotter
Copy link

JamieWotter commented Nov 4, 2022 •
edited

Happening for me on the Polar Area chart as of about 2 hours ago also. Seems to be an issue with the tooltips.

@mdevDE
Copy link

mdevDE commented Nov 5, 2022 •
edited

Version: 3.36.1
I experience the same problem for Polar Area Charts and RadialBar Charts

Uncaught (in promise) TypeError: Cannot read properties of null (reading 'elGridBorders')
at apexcharts.min.js:14:39185
at new Promise ()
at t.value (apexcharts.min.js:14:38205)
at apexcharts.min.js:14:36153
at new Promise ()
at t.value (apexcharts.min.js:14:21668)
at VueComponent.init (vue-apexcharts.js:123:1)
at VueComponent.mounted (vue-apexcharts.js:69:1)
at invokeWithErrorHandling (vue.runtime.esm.js:1863:1)
at callHook (vue.runtime.esm.js:4235:1)

@TangoPJ
Copy link

TangoPJ commented Nov 7, 2022

How did you solve this problem? I have the same one

@TangoPJ
Copy link

TangoPJ commented Nov 7, 2022

I solved this problem via update the version, thank you :)

patrickdevivo added a commit to mergestat/mergestat that referenced this issue Mar 7, 2023
@patrickdevivo
[Snyk] Upgrade apexcharts from 3.36.3 to 3.37.0 (#885)
6300094 
<p>This PR was automatically created by Snyk using the credentials of a
real user.</p><br /><h3>Snyk has created this PR to upgrade apexcharts
from 3.36.3 to 3.37.0.</h3>

:information_source: Keep your dependencies up-to-date. This makes it
easier to fix existing vulnerabilities and to more quickly identify and
fix newly disclosed vulnerabilities when they affect your project.
<hr/>

- The recommended version is **1 version** ahead of your current
version.
- The recommended version was released **a month ago**, on 2023-02-04.


<details>
<summary><b>Release notes</b></summary>
<br/>
  <details>
    <summary>Package name: <b>apexcharts</b></summary>
    <ul>
      <li>
<b>3.37.0</b> - <a
href="https://snyk.io/redirect/github/apexcharts/apexcharts.js/releases/tag/v3.37.0">2023-02-04</a></br><h3><g-emoji
class="g-emoji" alias="new"
fallback-src="https://github.githubassets.com/images/icons/emoji/unicode/1f195.png">🆕</g-emoji>
Enhancements</h3>
<ul>
<li>Changed border-radius implementation -<a
href="/apexcharts/apexcharts.js/blob/v3.37.0/src/modules/Graphics.js">
Credits to Yona Appletree </a></li>
<li><a
href="https://snyk.io/redirect/github/apexcharts/apexcharts.js/commit/cec7a8bfed76aa5625ec17aca533069507688b3e">improve
annotations; allow annotation to be drawn by px</a></li>
</ul>
<h3><g-emoji class="g-emoji" alias="lady_beetle"
fallback-src="https://github.githubassets.com/images/icons/emoji/unicode/1f41e.png">🐞</g-emoji>
Bug Fixes</h3>
<ul>
<li>Yaxis title offset when horizontal - fixes <a class="issue-link
js-issue-link" data-error-text="Failed to load title"
data-id="1351440235" data-permission-text="Title is private"
data-url="apexcharts/apexcharts.js#3336"
data-hovercard-type="issue"
data-hovercard-url="/apexcharts/apexcharts.js/issues/3336/hovercard"
href="https://snyk.io/redirect/github/apexcharts/apexcharts.js/issues/3336">#3336</a></li>
<li>Reversed y-axis in stacked bars - fixes <a class="issue-link
js-issue-link" data-error-text="Failed to load title"
data-id="1409525019" data-permission-text="Title is private"
data-url="apexcharts/apexcharts.js#3427"
data-hovercard-type="issue"
data-hovercard-url="/apexcharts/apexcharts.js/issues/3427/hovercard"
href="https://snyk.io/redirect/github/apexcharts/apexcharts.js/issues/3427">#3427</a></li>
<li>Fix undefined elGridBorders in pie chart -(<a class="commit-link"
data-hovercard-type="commit"
data-hovercard-url="https://github.com/apexcharts/apexcharts.js/commit/829a1be15da52322502183935d36ceafa6c26c3e/hovercard"
href="https://snyk.io/redirect/github/apexcharts/apexcharts.js/commit/829a1be15da52322502183935d36ceafa6c26c3e"><tt>829a1be</tt></a>)
<a
href="https://snyk.io/redirect/github/apexcharts/apexcharts.js/commit/829a1be15da52322502183935d36ceafa6c26c3e">fixes</a>
<a class="issue-link js-issue-link" data-error-text="Failed to load
title" data-id="1436076713" data-permission-text="Title is private"
data-url="apexcharts/apexcharts.js#3472"
data-hovercard-type="issue"
data-hovercard-url="/apexcharts/apexcharts.js/issues/3472/hovercard"
href="https://snyk.io/redirect/github/apexcharts/apexcharts.js/issues/3472">#3472</a></li>
<li><a
href="https://snyk.io/redirect/github/apexcharts/apexcharts.js/commit/52c4a57945b6d00775c3f5f685402b58c25e9d5c">hide
gridBorders in sparklines</a></li>
<li><a
href="https://snyk.io/redirect/github/apexcharts/apexcharts.js/commit/090c68334c0b5f37b2c0d37ccc29cb4dfa0794b2">Fix
x-axis tick alignment</a></li>
<li><a
href="https://snyk.io/redirect/github/apexcharts/apexcharts.js/commit/c34faaf6d5206de3b427acfde0236f4bdc49a9f1">rangebar
x-axis datetime -</a> <a
href="https://snyk.io/redirect/github/apexcharts/apexcharts.js/commit/c34faaf6d5206de3b427acfde0236f4bdc49a9f1">fixes</a>
<a class="issue-link js-issue-link" data-error-text="Failed to load
title" data-id="1463302497" data-permission-text="Title is private"
data-url="apexcharts/apexcharts.js#3514"
data-hovercard-type="issue"
data-hovercard-url="/apexcharts/apexcharts.js/issues/3514/hovercard"
href="https://snyk.io/redirect/github/apexcharts/apexcharts.js/issues/3514">#3514</a></li>
<li><a
href="https://snyk.io/redirect/github/apexcharts/apexcharts.js/commit/cc70384fffd6e855381be4729722481147967211">fix
NaN values -</a> <a
href="https://snyk.io/redirect/github/apexcharts/apexcharts.js/commit/cc70384fffd6e855381be4729722481147967211">fixes</a>
<a class="issue-link js-issue-link" data-error-text="Failed to load
title" data-id="1551693158" data-permission-text="Title is private"
data-url="apexcharts/apexcharts.js#3610"
data-hovercard-type="issue"
data-hovercard-url="/apexcharts/apexcharts.js/issues/3610/hovercard"
href="https://snyk.io/redirect/github/apexcharts/apexcharts.js/issues/3610">#3610</a></li>
<li><a
href="https://snyk.io/redirect/github/apexcharts/apexcharts.js/commit/9b01e317d392971d930efcda919b69d49cc205f4">NaN
bug in bars with rounded corners -</a> <a
href="https://snyk.io/redirect/github/apexcharts/apexcharts.js/commit/9b01e317d392971d930efcda919b69d49cc205f4">fixes</a>
<a class="issue-link js-issue-link" data-error-text="Failed to load
title" data-id="1552768020" data-permission-text="Title is private"
data-url="apexcharts/apexcharts.js#3615"
data-hovercard-type="issue"
data-hovercard-url="/apexcharts/apexcharts.js/issues/3615/hovercard"
href="https://snyk.io/redirect/github/apexcharts/apexcharts.js/issues/3615">#3615</a></li>
<li><a
href="https://snyk.io/redirect/github/apexcharts/apexcharts.js/commit/0e598a7cdc7a51e3c3cd6743c95efed5775b847f">bring
back xaxis gridlines -</a> <a
href="https://snyk.io/redirect/github/apexcharts/apexcharts.js/commit/0e598a7cdc7a51e3c3cd6743c95efed5775b847f">fixes</a>
<a class="issue-link js-issue-link" data-error-text="Failed to load
title" data-id="1516254324" data-permission-text="Title is private"
data-url="apexcharts/apexcharts.js#3580"
data-hovercard-type="issue"
data-hovercard-url="/apexcharts/apexcharts.js/issues/3580/hovercard"
href="https://snyk.io/redirect/github/apexcharts/apexcharts.js/issues/3580">#3580</a></li>
</ul>
      </li>
      <li>
        <b>3.36.3</b> - 2022-11-05
      </li>
    </ul>
from <a
href="https://snyk.io/redirect/github/apexcharts/apexcharts.js/releases">apexcharts
GitHub release notes</a>
  </details>
</details>


<details>
  <summary><b>Commit messages</b></summary>
  </br>
  <details>
    <summary>Package name: <b>apexcharts</b></summary>
    <ul>
<li><a
href="https://snyk.io/redirect/github/apexcharts/apexcharts.js/commit/6e40a785ff2fd7b64183e27694adee6ef67ded67">6e40a78</a>
build - 3.37.0</li>
<li><a
href="https://snyk.io/redirect/github/apexcharts/apexcharts.js/commit/f7e11417e3f9b384d1597f0cb0e747070ac91a5f">f7e1141</a>
3.37.0</li>
<li><a
href="https://snyk.io/redirect/github/apexcharts/apexcharts.js/commit/0e598a7cdc7a51e3c3cd6743c95efed5775b847f">0e598a7</a>
bring back xaxis gridlines - fixes #3580</li>
<li><a
href="https://snyk.io/redirect/github/apexcharts/apexcharts.js/commit/5b809152af44ce0bdb8d640b4ae1f04579b312b2">5b80915</a>
fix yaxis tick generation for smaller range</li>
<li><a
href="https://snyk.io/redirect/github/apexcharts/apexcharts.js/commit/0e10f7e25415cac3a7a363224a9412096c061ddd">0e10f7e</a>
provide min and max values in tooltip for rangebars - fixes #3536</li>
<li><a
href="https://snyk.io/redirect/github/apexcharts/apexcharts.js/commit/9b01e317d392971d930efcda919b69d49cc205f4">9b01e31</a>
NaN bug in bars with rounded corners - fixes #3615</li>
<li><a
href="https://snyk.io/redirect/github/apexcharts/apexcharts.js/commit/cc70384fffd6e855381be4729722481147967211">cc70384</a>
fix NaN values - fixes #3610</li>
<li><a
href="https://snyk.io/redirect/github/apexcharts/apexcharts.js/commit/0b14554e5c5b7264f828ff0238285104365bbfd3">0b14554</a>
fix positioning of grid lines</li>
<li><a
href="https://snyk.io/redirect/github/apexcharts/apexcharts.js/commit/c34faaf6d5206de3b427acfde0236f4bdc49a9f1">c34faaf</a>
rangebar x-axis datetime - fixes #3514</li>
<li><a
href="https://snyk.io/redirect/github/apexcharts/apexcharts.js/commit/18a971994192b9b1fd396c8043373f0aead5b18e">18a9719</a>
Merge pull request #3589 from
apexcharts/dependabot/npm_and_yarn/json5-1.0.2</li>
<li><a
href="https://snyk.io/redirect/github/apexcharts/apexcharts.js/commit/4d5fb4a49a2d85106d8c83bbaa21908577250327">4d5fb4a</a>
Bump json5 from 1.0.1 to 1.0.2</li>
<li><a
href="https://snyk.io/redirect/github/apexcharts/apexcharts.js/commit/7a7f6cc1bc389c3f568fd9c47d4e9d194898f5cd">7a7f6cc</a>
Merge branch &#x27;main&#x27; of
https://github.com/apexcharts/apexcharts.js</li>
<li><a
href="https://snyk.io/redirect/github/apexcharts/apexcharts.js/commit/a537e093bba85f60bad4d3ff3b82ae5982a6f297">a537e09</a>
fix y-axis labels alignment</li>
<li><a
href="https://snyk.io/redirect/github/apexcharts/apexcharts.js/commit/d5c8de8acd19be5d5b200b9cf49a06af3d012ee7">d5c8de8</a>
Merge pull request #3515 from jackieleng/main</li>
<li><a
href="https://snyk.io/redirect/github/apexcharts/apexcharts.js/commit/5f8636a71a87c28bb114eb2d5f4b22ef9446c6f3">5f8636a</a>
Fix x axis title position</li>
<li><a
href="https://snyk.io/redirect/github/apexcharts/apexcharts.js/commit/f0ab94f508333fcc91123cf9caca5bce791f4b17">f0ab94f</a>
Merge pull request #3505 from
sadsunshower/fix-x-axis-tick-alignment</li>
<li><a
href="https://snyk.io/redirect/github/apexcharts/apexcharts.js/commit/89222204a56263f99d227ff918b6ff839fdb2e26">8922220</a>
Merge pull request #3506 from
apexcharts/dependabot/npm_and_yarn/loader-utils-1.4.2</li>
<li><a
href="https://snyk.io/redirect/github/apexcharts/apexcharts.js/commit/fef9a2796845844c84263fc76c8ea04118985227">fef9a27</a>
Bump loader-utils from 1.4.0 to 1.4.2</li>
<li><a
href="https://snyk.io/redirect/github/apexcharts/apexcharts.js/commit/50cf0805e3a7183f93441575de362f706dea9622">50cf080</a>
Add test for x-axis ticks</li>
<li><a
href="https://snyk.io/redirect/github/apexcharts/apexcharts.js/commit/090c68334c0b5f37b2c0d37ccc29cb4dfa0794b2">090c683</a>
Fix x-axis tick alignment</li>
<li><a
href="https://snyk.io/redirect/github/apexcharts/apexcharts.js/commit/baeff5437cff5e1d0f8cb0e81430514cb55da8e8">baeff54</a>
Merge pull request #3476 from
apexcharts/dependabot/npm_and_yarn/loader-utils-and-svg-inline-loader-1.4.1</li>
<li><a
href="https://snyk.io/redirect/github/apexcharts/apexcharts.js/commit/cc87e7b2384dd3ba4743798397a5a776e8c3baa9">cc87e7b</a>
Bump loader-utils and svg-inline-loader</li>
    </ul>

<a
href="https://snyk.io/redirect/github/apexcharts/apexcharts.js/compare/f63578b9b10057aa44bb1bb038391420560bf26b...6e40a785ff2fd7b64183e27694adee6ef67ded67">Compare</a>
  </details>
</details>
<hr/>

**Note:** *You are seeing this because you or someone else with access
to this repository has authorized Snyk to open upgrade PRs.*

For more information: <img
src="https://api.segment.io/v1/pixel/track?data=eyJ3cml0ZUtleSI6InJyWmxZcEdHY2RyTHZsb0lYd0dUcVg4WkFRTnNCOUEwIiwiYW5vbnltb3VzSWQiOiJiYjFlNzYyYS0wN2NmLTQ0MGItODg3NC03ZTcyOTg5YzhhYmUiLCJldmVudCI6IlBSIHZpZXdlZCIsInByb3BlcnRpZXMiOnsicHJJZCI6ImJiMWU3NjJhLTA3Y2YtNDQwYi04ODc0LTdlNzI5ODljOGFiZSJ9fQ=="
width="0" height="0"/>

🧐 [View latest project
report](https://app.snyk.io/org/mergestat/project/e267d993-52da-4f6e-9de9-0012cd8b1835?utm_source&#x3D;github&amp;utm_medium&#x3D;referral&amp;page&#x3D;upgrade-pr)

🛠 [Adjust upgrade PR
settings](https://app.snyk.io/org/mergestat/project/e267d993-52da-4f6e-9de9-0012cd8b1835/settings/integration?utm_source&#x3D;github&amp;utm_medium&#x3D;referral&amp;page&#x3D;upgrade-pr)

🔕 [Ignore this dependency or unsubscribe from future upgrade
PRs](https://app.snyk.io/org/mergestat/project/e267d993-52da-4f6e-9de9-0012cd8b1835/settings/integration?pkg&#x3D;apexcharts&amp;utm_source&#x3D;github&amp;utm_medium&#x3D;referral&amp;page&#x3D;upgrade-pr#auto-dep-upgrades)

<!---
(snyk:metadata:{"prId":"bb1e762a-07cf-440b-8874-7e72989c8abe","prPublicId":"bb1e762a-07cf-440b-8874-7e72989c8abe","dependencies":[{"name":"apexcharts","from":"3.36.3","to":"3.37.0"}],"packageManager":"npm","type":"auto","projectUrl":"https://app.snyk.io/org/mergestat/project/e267d993-52da-4f6e-9de9-0012cd8b1835?utm_source=github&utm_medium=referral&page=upgrade-pr","projectPublicId":"e267d993-52da-4f6e-9de9-0012cd8b1835","env":"prod","prType":"upgrade","vulns":[],"issuesToFix":[],"upgrade":[],"upgradeInfo":{"versionsDiff":1,"publishedDate":"2023-02-04T19:46:44.103Z"},"templateVariants":[],"hasFixes":false,"isMajorUpgrade":false,"isBreakingChange":false,"priorityScoreList":[]})
--->
@shaneomatz shaneomatz mentioned this issue May 5, 2023
Open
@Jani-Instrive
Copy link

Updated apexCharts from 3.36.3 to 3.37.0 but still facing same issue

@m3di
Copy link
Contributor

m3di commented Feb 20, 2024

i have the same issue, is it resolved?

"apexcharts": "^3.46.0",
"vue3-apexcharts": "^1.5.2",

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
bug Something isn't working verified
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
7 participants
@pistou @m3di @junedchhipa @mdevDE @TangoPJ @JamieWotter @Jani-Instrive