Bugfix: span gaps over null values beyond scale limits #11984

marisst · 2025-01-01T22:58:52Z

Currently this configuration

{
    type: 'line',
    data: {
        labels: [0, 10, 20, 30, 40, 50],
        datasets: [{
            data: [3, null, 2, 3, null, 1.5],
            spanGaps: true,
            tension: 0.4
        }]
    },
    options: {
        scales: {
            x: {
                type: 'linear',
                min: 11,
                max: 40,
            }
        }
    }
}

produces

Bug: The line is not spanned over to the points [0, 3] and [50, 1.5] despite spanGaps being true. This happens when the first point beyond x min or x max limits contains a null value ([10, null] and [40, null]).

This PR contains changes in _getStartAndCountOfVisiblePoints in helpers.extras.ts fixing the error. It also contains 3 new tests in controller.line.tests.js.

Now the above configuration results in:

Issues fixed:

…t and _drawCount

marisst · 2025-01-03T14:09:42Z

@LeeLenaleee Could we add this to version 4.4.8 too? :)

![snyk-top-banner](https://redirect.github.com/andygongea/OWASP-Benchmark/assets/818805/c518c423-16fe-447e-b67f-ad5a49b5d123) <h3>Snyk has created this PR to upgrade chart.js from 4.4.7 to 4.4.8.</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**. <details> <summary><b>Release notes</b></summary> <br/> <details> <summary>Package name: <b>chart.js</b></summary> <ul> <li> <b>4.4.8</b> - <a href="2025-02-19

Essential">https://redirect.github.com/chartjs/Chart.js/releases/tag/v4.4.8">2025-02-19</a></br><h1>Essential Links</h1> <ul> <li><a href="https://www.npmjs.com/package/chart.js" rel="nofollow">npm</a></li> <li><a href="https://www.chartjs.org/docs/4.4.8/migration/v4-migration.html" rel="nofollow">Migration guide</a></li> <li><a href="https://www.chartjs.org/docs/4.4.8/" rel="nofollow">Docs</a></li> <li><a href="https://www.chartjs.org/docs/4.4.8/api/" rel="nofollow">API</a></li> <li><a href="https://www.chartjs.org/docs/4.4.8/samples/information.html" rel="nofollow">Samples</a></li> </ul> <ul> <li><a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="2855725721" data-permission-text="Title is private" data-url="chartjs/Chart.js#12034" data-hovercard-type="pull_request" data-hovercard-url="/chartjs/Chart.js/pull/12034/hovercard" href="#12034</a">https://redirect.github.com/chartjs/Chart.js/pull/12034">#12034</a> [fix] Handle non-primitives in isNumber</li> </ul> <h2>Bugs Fixed</h2> <ul> <li><a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="2861287106" data-permission-text="Title is private" data-url="chartjs/Chart.js#12035" data-hovercard-type="pull_request" data-hovercard-url="/chartjs/Chart.js/pull/12035/hovercard" href="#12035</a">https://redirect.github.com/chartjs/Chart.js/pull/12035">#12035</a> Export ...ParsedData interfaces</li> <li><a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="2818663010" data-permission-text="Title is private" data-url="chartjs/Chart.js#12012" data-hovercard-type="pull_request" data-hovercard-url="/chartjs/Chart.js/pull/12012/hovercard" href="#12012</a">https://redirect.github.com/chartjs/Chart.js/pull/12012">#12012</a> Fix helpers `Chart` type</li> <li><a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="2769020679" data-permission-text="Title is private" data-url="chartjs/Chart.js#11991" data-hovercard-type="pull_request" data-hovercard-url="/chartjs/Chart.js/pull/11991/hovercard" href="#11991</a">https://redirect.github.com/chartjs/Chart.js/pull/11991">#11991</a> Bugfix: TypeError in Interaction due to out-of-bounds index</li> <li><a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="2766632066" data-permission-text="Title is private" data-url="chartjs/Chart.js#11986" data-hovercard-type="pull_request" data-hovercard-url="/chartjs/Chart.js/pull/11986/hovercard" href="#11986</a">https://redirect.github.com/chartjs/Chart.js/pull/11986">#11986</a> Bugfix: return nearest non-null point on interaction when spanGaps=true</li> <li><a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="2765297811" data-permission-text="Title is private" data-url="chartjs/Chart.js#11984" data-hovercard-type="pull_request" data-hovercard-url="/chartjs/Chart.js/pull/11984/hovercard" href="#11984</a">https://redirect.github.com/chartjs/Chart.js/pull/11984">#11984</a> Bugfix: span gaps over null values beyond scale limits</li> </ul> <h2>Types</h2> <ul> <li><a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="2861287106" data-permission-text="Title is private" data-url="chartjs/Chart.js#12035" data-hovercard-type="pull_request" data-hovercard-url="/chartjs/Chart.js/pull/12035/hovercard" href="#12035</a">https://redirect.github.com/chartjs/Chart.js/pull/12035">#12035</a> Export ...ParsedData interfaces</li> <li><a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="2818663010" data-permission-text="Title is private" data-url="chartjs/Chart.js#12012" data-hovercard-type="pull_request" data-hovercard-url="/chartjs/Chart.js/pull/12012/hovercard" href="#12012</a">https://redirect.github.com/chartjs/Chart.js/pull/12012">#12012</a> Fix helpers `Chart` type</li> <li><a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="2817152604" data-permission-text="Title is private" data-url="chartjs/Chart.js#12010" data-hovercard-type="pull_request" data-hovercard-url="/chartjs/Chart.js/pull/12010/hovercard" href="#12010</a">https://redirect.github.com/chartjs/Chart.js/pull/12010">#12010</a> Type fixes for time adapters</li> </ul> <h2>Documentation</h2> <ul> <li><a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="2800752619" data-permission-text="Title is private" data-url="chartjs/Chart.js#12005" data-hovercard-type="pull_request" data-hovercard-url="/chartjs/Chart.js/pull/12005/hovercard" href="#12005</a">https://redirect.github.com/chartjs/Chart.js/pull/12005">#12005</a> Correct broken link in animations.md</li> <li><a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="2783665947" data-permission-text="Title is private" data-url="chartjs/Chart.js#11997" data-hovercard-type="pull_request" data-hovercard-url="/chartjs/Chart.js/pull/11997/hovercard" href="#11997</a">https://redirect.github.com/chartjs/Chart.js/pull/11997">#11997</a> Update linear-step-size.md</li> </ul> <h2>Development</h2> <ul> <li><a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="2861299890" data-permission-text="Title is private" data-url="chartjs/Chart.js#12036" data-hovercard-type="pull_request" data-hovercard-url="/chartjs/Chart.js/pull/12036/hovercard" href="#12036</a">https://redirect.github.com/chartjs/Chart.js/pull/12036">#12036</a> chore: bump to v4.4.8</li> </ul> <p>Thanks to <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/etimberg/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="@">https://redirect.github.com/etimberg">@ etimberg</a>, <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/joshkel/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="@">https://redirect.github.com/joshkel">@ joshkel</a>, <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/marisst/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="@">https://redirect.github.com/marisst">@ marisst</a>, <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/pensono/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="@">https://redirect.github.com/pensono">@ pensono</a> and <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/prems51/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="@">https://redirect.github.com/prems51">@ prems51</a></p> </li> <li> <b>4.4.7</b> - <a href="2024-12-01

Essential">https://redirect.github.com/chartjs/Chart.js/releases/tag/v4.4.7">2024-12-01</a></br><h1>Essential Links</h1> <ul> <li><a href="https://www.npmjs.com/package/chart.js" rel="nofollow">npm</a></li> <li><a href="https://www.chartjs.org/docs/4.4.7/migration/v4-migration.html" rel="nofollow">Migration guide</a></li> <li><a href="https://www.chartjs.org/docs/4.4.7/" rel="nofollow">Docs</a></li> <li><a href="https://www.chartjs.org/docs/4.4.7/api/" rel="nofollow">API</a></li> <li><a href="https://www.chartjs.org/docs/4.4.7/samples/information.html" rel="nofollow">Samples</a></li> </ul> <h2>Types</h2> <ul> <li><a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="1917908007" data-permission-text="Title is private" data-url="chartjs/Chart.js#11521" data-hovercard-type="pull_request" data-hovercard-url="/chartjs/Chart.js/pull/11521/hovercard" href="#11521</a">https://redirect.github.com/chartjs/Chart.js/pull/11521">#11521</a> fix: correct typing for doughnut, pie, and polarArea charts</li> <li><a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="2632473374" data-permission-text="Title is private" data-url="chartjs/Chart.js#11948" data-hovercard-type="pull_request" data-hovercard-url="/chartjs/Chart.js/pull/11948/hovercard" href="#11948</a">https://redirect.github.com/chartjs/Chart.js/pull/11948">#11948</a> Export TRBL from geometric</li> </ul> <h2>Documentation</h2> <ul> <li><a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="2707355372" data-permission-text="Title is private" data-url="chartjs/Chart.js#11968" data-hovercard-type="pull_request" data-hovercard-url="/chartjs/Chart.js/pull/11968/hovercard" href="#11968</a">https://redirect.github.com/chartjs/Chart.js/pull/11968">#11968</a> Add documentation about setting default tooltip fonts</li> <li><a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="2680807381" data-permission-text="Title is private" data-url="chartjs/Chart.js#11962" data-hovercard-type="pull_request" data-hovercard-url="/chartjs/Chart.js/pull/11962/hovercard" href="#11962</a">https://redirect.github.com/chartjs/Chart.js/pull/11962">#11962</a> Show correct title in multi series pie chart example</li> </ul> <h2>Development</h2> <ul> <li><a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="2708926592" data-permission-text="Title is private" data-url="chartjs/Chart.js#11969" data-hovercard-type="pull_request" data-hovercard-url="/chartjs/Chart.js/pull/11969/hovercard" href="#11969</a">https://redirect.github.com/chartjs/Chart.js/pull/11969">#11969</a> Chore: bump version to 4.4.7</li> <li><a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="2677470818" data-permission-text="Title is private" data-url="chartjs/Chart.js#11959" data-hovercard-type="pull_request" data-hovercard-url="/chartjs/Chart.js/pull/11959/hovercard" href="#11959</a">https://redirect.github.com/chartjs/Chart.js/pull/11959">#11959</a> Bump cross-spawn from 6.0.5 to 6.0.6</li> <li><a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="1897450644" data-permission-text="Title is private" data-url="chartjs/Chart.js#11501" data-hovercard-type="pull_request" data-hovercard-url="/chartjs/Chart.js/pull/11501/hovercard" href="#11501</a">https://redirect.github.com/chartjs/Chart.js/pull/11501">#11501</a> Simplify check undefinded</li> </ul> <p>Thanks to <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/Connormiha/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="@">https://redirect.github.com/Connormiha">@ Connormiha</a>, <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/DustinEwan/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="@">https://redirect.github.com/DustinEwan">@ DustinEwan</a>, <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/LeeLenaleee/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="@">https://redirect.github.com/LeeLenaleee">@ LeeLenaleee</a>, <a class="user-mention notranslate" data-hovercard-type="organization" data-hovercard-url="/orgs/dependabot/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="@">https://redirect.github.com/dependabot">@ dependabot</a> and <a class="user-mention notranslate" data-hovercard-type="organization" data-hovercard-url="/orgs/dependabot/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="@">https://redirect.github.com/dependabot">@ dependabot</a>[bot]</p> </li> </ul> from <a href="chart.js">https://redirect.github.com/chartjs/Chart.js/releases">chart.js GitHub release notes</a> </details> </details> --- > [!IMPORTANT] > > - Check the changes in this PR to ensure they won't cause issues with your project. > - This PR was automatically created by Snyk using the credentials of a real user. --- 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=eyJ3cml0ZUtleSI6InJyWmxZcEdHY2RyTHZsb0lYd0dUcVg4WkFRTnNCOUEwIiwiYW5vbnltb3VzSWQiOiIyZGQ1MmVmNi0yZTg3LTRiZTgtYjM5OC05MDYyYmFlOTg0NjUiLCJldmVudCI6IlBSIHZpZXdlZCIsInByb3BlcnRpZXMiOnsicHJJZCI6IjJkZDUyZWY2LTJlODctNGJlOC1iMzk4LTkwNjJiYWU5ODQ2NSJ9fQ==" width="0" height="0"/> > - 🧐 [View latest project report](https://app.snyk.io/org/dawoudio/project/e27b08aa-e5d2-4b10-8303-630a69d0b669?utm_source=github&utm_medium=referral&page=upgrade-pr) > - 📜 [Customise PR templates](https://docs.snyk.io/scan-using-snyk/pull-requests/snyk-fix-pull-or-merge-requests/customize-pr-templates?utm_source=&utm_content=fix-pr-template) > - 🛠 [Adjust upgrade PR settings](https://app.snyk.io/org/dawoudio/project/e27b08aa-e5d2-4b10-8303-630a69d0b669/settings/integration?utm_source=github&utm_medium=referral&page=upgrade-pr) > - 🔕 [Ignore this dependency or unsubscribe from future upgrade PRs](https://app.snyk.io/org/dawoudio/project/e27b08aa-e5d2-4b10-8303-630a69d0b669/settings/integration?pkg=chart.js&utm_source=github&utm_medium=referral&page=upgrade-pr#auto-dep-upgrades) [//]: # 'snyk:metadata:{"customTemplate":{"variablesUsed":[],"fieldsUsed":[]},"dependencies":[{"name":"chart.js","from":"4.4.7","to":"4.4.8"}],"env":"prod","hasFixes":false,"isBreakingChange":false,"isMajorUpgrade":false,"issuesToFix":[],"prId":"2dd52ef6-2e87-4be8-b398-9062bae98465","prPublicId":"2dd52ef6-2e87-4be8-b398-9062bae98465","packageManager":"npm","priorityScoreList":[],"projectPublicId":"e27b08aa-e5d2-4b10-8303-630a69d0b669","projectUrl":"https://app.snyk.io/org/dawoudio/project/e27b08aa-e5d2-4b10-8303-630a69d0b669?utm_source=github&utm_medium=referral&page=upgrade-pr","prType":"upgrade","templateFieldSources":{"branchName":"default","commitMessage":"default","description":"default","title":"default"},"templateVariants":[],"type":"auto","upgrade":[],"upgradeInfo":{"versionsDiff":1,"publishedDate":"2025-02-19T15:48:26.514Z"},"vulns":[]}'

marisst added 6 commits December 31, 2024 19:34

Bugfix: spanGaps not working near min and max limits

281698b

Fix error when meta.dataset.options = null

1572d11

Add tests for correct setting of line controller properties _drawStar…

df35934

…t and _drawCount

Fix spacing in controller line tests

538487d

Add tension to test

8345e65

Add a better test case

a23496a

marisst mentioned this pull request Jan 1, 2025

LineChart disappears while zooming in if spanGaps: true and non-null datapoints are out of bounds #11956

Open

marisst added 2 commits January 2, 2025 12:03

Avoid the use of FindLastIndex

8cada72

Avoid taking 0 for null value and improve naming

7aaced2

marisst changed the title ~~Bugfix: spanGaps not spanning over null values beyond scale limits~~ Bugfix: span gaps over null values beyond scale limits Jan 2, 2025

etimberg approved these changes Jan 2, 2025

View reviewed changes

kurkle approved these changes Jan 2, 2025

View reviewed changes

kurkle added the type: bug label Jan 2, 2025

etimberg merged commit 1e3d6e5 into chartjs:master Jan 3, 2025
7 checks passed

LeeLenaleee added this to the Version 4.4.8 milestone Jan 3, 2025

marisst mentioned this pull request Jan 3, 2025

Bugfix: return nearest non-null point on interaction when spanGaps=true #11986

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Bugfix: span gaps over null values beyond scale limits #11984

Bugfix: span gaps over null values beyond scale limits #11984

Uh oh!

marisst commented Jan 1, 2025 •

edited

Loading

Uh oh!

Uh oh!

marisst commented Jan 3, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

Bugfix: span gaps over null values beyond scale limits #11984

Bugfix: span gaps over null values beyond scale limits #11984

Uh oh!

Conversation

marisst commented Jan 1, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Uh oh!

marisst commented Jan 3, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

marisst commented Jan 1, 2025 •

edited

Loading