Uploaded image for project: 'Moodle'
  1. Moodle
  2. MDL-85158

Configure ChartJs responsive options property

    • MOODLE_500_STABLE
    • Hide
      1. Apply the patch attached to this ticket to perform the tests as per the steps below.
      2. Log in as admin
      3. Navigate to `WWW_ROOT/lib/tests/other/chartjstestpage.php`
      4. Confirm that all charts loaded normally and no exceptions were thrown, as well as no warnings via developer tools.
      5. Confirm that the second chart, "DOUGHNUT CHART", despite having the aspectRatio configured, as it has the maintainAspectRatio property set to false, the height of the graph will be controlled by CSS properties of the container it is in, thus not being affected by the aspectRatio;
      6. Confirm that the third chart, "TENSIONED LINES CHART", is displayed in a rectangular shape. It has the height compressed and full width because the aspect ratio was set to 4. Also on that chart, confirm when resizing the screen, it has a short delay before resizing because the property resizeDelay was set to 2000 milliseconds (2 seconds);
      7. Confirm that the fourth chart, "SMOOTH LINES CHART", is displayed correctly in a rectangular format because the aspectRatio property is set to 1 and the maintainAspectRatio property is set to true, so the control of the aspectRatio is in the property itself.
      8. Confirm that the fifth chart, "BAR CHART", is displayed correctly but has a small size because the property responsive is set to false, so it's using the original size of the canvas and not being resized.
      Show
      Apply the patch attached to this ticket to perform the tests as per the steps below. Log in as admin Navigate to `WWW_ROOT/lib/tests/other/chartjstestpage.php` Confirm that all charts loaded normally and no exceptions were thrown, as well as no warnings via developer tools. Confirm that the second chart, "DOUGHNUT CHART", despite having the aspectRatio configured, as it has the maintainAspectRatio property set to false, the height of the graph will be controlled by CSS properties of the container it is in, thus not being affected by the aspectRatio; Confirm that the third chart, "TENSIONED LINES CHART", is displayed in a rectangular shape. It has the height compressed and full width because the aspect ratio was set to 4. Also on that chart, confirm when resizing the screen, it has a short delay before resizing because the property resizeDelay was set to 2000 milliseconds (2 seconds); Confirm that the fourth chart, "SMOOTH LINES CHART", is displayed correctly in a rectangular format because the aspectRatio property is set to 1 and the maintainAspectRatio property is set to true, so the control of the aspectRatio is in the property itself. Confirm that the fifth chart, "BAR CHART", is displayed correctly but has a small size because the property responsive is set to false, so it's using the original size of the canvas and not being resized.
    • Hide

      Code verified against automated checks.

      Checked MDL-85158 using repository: https://github.com/pedrojordao/moodle.git

      More information about this report

      Built on: Mon Apr 28 04:37:39 UTC 2025

      Show
      Code verified against automated checks. Checked MDL-85158 using repository: https://github.com/pedrojordao/moodle.git main (0 errors / 0 warnings) [branch: MDL-85158 | CI Job ] More information about this report Built on: Mon Apr 28 04:37:39 UTC 2025
    • Show
      Launching automatic jobs for branch MDL-85158 https://ci.moodle.org/view/Testing/job/DEV.02%20-%20Developer-requested%20PHPUnit/19101/ PHPUnit (sqlsrv) https://ci.moodle.org/view/Testing/job/DEV.01%20-%20Developer-requested%20Behat/65306/ Behat (NonJS - boost and classic) https://ci.moodle.org/view/Testing/job/DEV.01%20-%20Developer-requested%20Behat/65307/ Behat (Firefox - boost) --> unrelated https://ci.moodle.org/view/Testing/job/DEV.01%20-%20Developer-requested%20Behat/65308/ Behat (Firefox - classic) --> unrelated https://ci.moodle.org/view/Testing/job/DEV.01%20-%20Developer-requested%20Behat/65309/ App tests (stable app version) Built on: Tue Apr 22 16:25:34 UTC 2025
    • 2
    • WP Sprint 2025-I1.4 (Clones), WP Sprint 2025-I2.0, WP Sprint 2025-I2.1 (Clones), WP Sprint 2025-I2.2 (Clones)

      Currently we do not have the ability to configure the aspectRatio or other options related to the responsiveness of the chart, the ChartJs responsive options are fixed and never called.

            pedro.jordao@moodle.com Pedro Jordao
            pedro.jordao@moodle.com Pedro Jordao
            Carlos Castillo Carlos Castillo
            Votes:
            0 Vote for this issue
            Watchers:
            2 Start watching this issue

              Created:
              Updated:

                Estimated:
                Original Estimate - 0 minutes
                0m
                Remaining:
                Remaining Estimate - 0 minutes
                0m
                Logged:
                Time Spent - 4 days, 5 hours, 28 minutes
                4d 5h 28m

                  Error rendering 'clockify-timesheets-time-tracking-reports:timer-sidebar'. Please contact your Jira administrators.