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.

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

RangeArea Tooltips don't format datetime values #3514

Closed
delphi-sucks opened this issue Nov 24, 2022 · 1 comment
Closed

RangeArea Tooltips don't format datetime values #3514

delphi-sucks opened this issue Nov 24, 2022 · 1 comment
Labels
bug Something isn't working verified

Comments

@delphi-sucks
Copy link

Description

When trying to use a RangeArea-Chart with a datetime-x-axis, the tooltip label for the x-axis doesn't get formatted like expected.

Steps to Reproduce

  1. Create a RangeArea-Chart with datetime-Values for the x-axis
  2. Set the x-axis type to datetime
  3. Enable the tooltip
  4. Hover over a datapoint to display the tooltip

Expected Behavior

The tooltip label for the x-axis gets formatted like the x-axis label.

Actual Behavior

The tooltip label for the x-axis just gets casted to string.

Screenshots

chrome_aU3lRJSibO

Reproduction Link

https://codepen.io/moddesteni/pen/eYKrYJz

@delphi-sucks delphi-sucks added the bug Something isn't working label Nov 24, 2022
@denxorz
Copy link

denxorz commented Nov 30, 2022

Worked around it like this for now:

https://codepen.io/denxorz/pen/LYrBoEq

  tooltip: {
    y: {
      formatter: (val) => {
        return isNaN(+val)
          ? `${new Date(parseInt(val)).toLocaleDateString()}:`  // Date (as string)
          : +val;                                               // Value (as int)
      }
    }
  },

patrickdevivo added a commit to mergestat/mergestat that referenced this issue Mar 7, 2023
<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":[]})
--->
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working verified
Projects
None yet
Development

No branches or pull requests

3 participants