Add grace option for linear scale (#8581)

* Add `grace` option for linear scale

* cc

docs/docs/axes/cartesian/linear.mdx

@@ -18,6 +18,7 @@ Namespace: `options.scales[scaleId]`
 | Name | Type | Description
 | ---- | ---- | -----------
 | `beginAtZero` | `boolean` | if true, scale will include 0 if it is not already included.
+| `grace` | `number`\|`string` | Percentage (string ending with `%`) or amount (number) for added room in the scale range above and below data. [more...](#grace)
 
 <CommonCartesian />
 <CommonAll />
@@ -58,6 +59,45 @@ let options = {
 };
 ```
 
+## Grace
+
+If the value is string ending with `%`, its treat as percentage. If number, its treat as value.
+The value is added to the maximum data value and subtracted from the minumum data. This extends the scale range as if the data values were that much greater.
+
+import { useEffect, useRef } from 'react';
+
+```jsx live
+function example() {
+  const canvas = useRef(null);
+  useEffect(() => {
+    const cfg = {
+        type: 'bar',
+        data: {
+            labels: ['Positive', 'Negative'],
+            datasets: [{
+                data: [100, -50],
+                backgroundColor: 'rgb(255, 99, 132)'
+            }],
+        },
+        options: {
+            scales: {
+                y: {
+                    type: 'linear',
+                    grace: '5%'
+                }
+            },
+            plugins: {
+              legend: false
+            }
+        }
+    };
+    const chart = new Chart(canvas.current.getContext('2d'), cfg);
+    return () => chart.destroy();
+  });
+  return <div className="chartjs-wrapper"><canvas ref={canvas} className="chartjs"></canvas></div>;
+}
+```
+
 ## Internal data format
 
 Internally, the linear scale uses numeric data