Merge branch 'master' into enable-scale-title-stroke

Author: asmenezes

.github/workflows/ci.yml

@@ -33,7 +33,7 @@ jobs:
       - uses: actions/checkout@v4
       - uses: pnpm/[email protected]
       - name: Use Node.js
-        uses: actions/setup-node@v5
+        uses: actions/setup-node@v6
         with:
           node-version: 16
           cache: pnpm

.github/workflows/deploy-docs.yml

@@ -26,7 +26,7 @@ jobs:
       - uses: actions/checkout@v4
       - uses: pnpm/[email protected]
       - name: Use Node.js
-        uses: actions/setup-node@v5
+        uses: actions/setup-node@v6
         with:
           node-version: 16
           cache: pnpm

.github/workflows/release.yml

@@ -28,7 +28,7 @@ jobs:
     steps:
       - uses: actions/checkout@v4
       - uses: pnpm/[email protected]
-      - uses: actions/setup-node@v5
+      - uses: actions/setup-node@v6
         with:
           registry-url: https://registry.npmjs.org/
           node-version: 16
@@ -73,7 +73,7 @@ jobs:
     steps:
       - uses: actions/checkout@v4
       - uses: pnpm/[email protected]
-      - uses: actions/setup-node@v5
+      - uses: actions/setup-node@v6
         with:
           registry-url: https://registry.npmjs.org/
           node-version: 16

docs/axes/cartesian/index.md

@@ -1,6 +1,6 @@
 # Cartesian Axes
 
-Axes that follow a cartesian grid are known as 'Cartesian Axes'. Cartesian axes are used for line, bar, and bubble charts. Four cartesian axes are included in Chart.js by default.
+Axes that follow a cartesian grid are known as 'Cartesian Axes'. Cartesian axes are used for line, bar, and bubble charts. Five cartesian axes are included in Chart.js by default.
 
 * [linear](./linear.md)
 * [logarithmic](./logarithmic.md)

docs/configuration/responsive.md

@@ -41,6 +41,19 @@ chart.canvas.parentNode.style.width = '128px';
 
 Note that in order for the above code to correctly resize the chart height, the [`maintainAspectRatio`](#configuration-options) option must also be set to `false`.
 
+## Flexbox / Grid Layout
+
+To prevent overflow issues when using flexbox / grid layout, you must set the flex / grid child element to have a `min-width` of `0`.
+See [issue 4156](https://github.com/chartjs/Chart.js/issues/4156#issuecomment-295180128) for more details.
+
+```html
+<div class="grid-container" style="display: grid">
+  <div class="chart-container" style="min-width: 0">
+    <canvas id="chart"></canvas>
+  </div>
+</div>
+```
+
 ## Printing Resizable Charts
 
 CSS media queries allow changing styles when printing a page. The CSS applied from these media queries may cause charts to need to resize. However, the resize won't happen automatically. To support resizing charts when printing, you need to hook the [onbeforeprint](https://developer.mozilla.org/en-US/docs/Web/API/WindowEventHandlers/onbeforeprint) event and manually trigger resizing of each chart.
@@ -62,4 +75,4 @@ window.addEventListener('beforeprint', () => {
 window.addEventListener('afterprint', () => {
   myChart.resize();
 });
-```
+```