Add minBarLength to chart scales (#37640)

Change-Id: I36c31f91b8522416e865dd3677158c12a057f24d

types/chart.js/chart.js-tests.ts

@@ -1,55 +1,54 @@
-import { Chart, ChartData, Point } from "chart.js";
+import { Chart, ChartData, Point } from 'chart.js';
 
 // alternative:
 // import chartjs = require('chart.js');
 // => chartjs.Chart
 
 const plugin = {
-    afterDraw: (chartInstance: Chart, easing: Chart.Easing, options?: any) => {
-    }
+    afterDraw: (chartInstance: Chart, easing: Chart.Easing, options?: any) => {},
 };
 
 const ctx = new CanvasRenderingContext2D();
 
 const chart: Chart = new Chart(ctx, {
-    type: "bar",
+    type: 'bar',
     plugins: [plugin, plugin],
     data: {
-        labels: ["group 1"],
+        labels: ['group 1'],
         datasets: [
             {
-                backgroundColor: "#000000",
+                backgroundColor: '#000000',
                 hoverBackgroundColor: ctx.createLinearGradient(0, 0, 0, 100),
                 hoverBorderColor: ctx.createLinearGradient(0, 0, 0, 100),
                 borderWidth: 1,
-                label: "test",
-                data: [1, null, 3]
-            }
-        ]
+                label: 'test',
+                data: [1, null, 3],
+            },
+        ],
     },
     options: {
         hover: {
-            intersect: true
+            intersect: true,
         },
         onHover(ev: MouseEvent, points: any[]) {
             return;
         },
         title: {
-            text: ["foo", "bar"]
+            text: ['foo', 'bar'],
         },
         tooltips: {
             filter: data => Number(data.yLabel) > 0,
             intersect: true,
             mode: 'index',
             itemSort: (a, b) => Math.random() - 0.5,
-            position: "average",
+            position: 'average',
             caretPadding: 2,
             displayColors: true,
-            borderColor: "rgba(0,0,0,0)",
+            borderColor: 'rgba(0,0,0,0)',
             borderWidth: 1,
             titleAlign: 'center',
             callbacks: {
-                title: ([point]) => point.label ? point.label.substring(0, 2) : 'title',
+                title: ([point]) => (point.label ? point.label.substring(0, 2) : 'title'),
                 label(tooltipItem) {
                     const { value, x, y, label } = tooltipItem;
                     return `${label}(${x}, ${y}) = ${value}`;
@@ -60,34 +59,35 @@ const chart: Chart = new Chart(ctx, {
             xAxes: [
                 {
                     ticks: {
-                        callback: Math.floor
+                        callback: Math.floor,
                     },
+                    minBarLength: 2,
                     gridLines: {
                         display: false,
                         borderDash: [5, 15],
                         borderDashOffset: 2,
                         zeroLineBorderDash: [5, 15],
                         zeroLineBorderDashOffset: 2,
-                        lineWidth: [1, 2, 3]
-                    }
-                }
-            ]
+                        lineWidth: [1, 2, 3],
+                    },
+                },
+            ],
         },
         legend: {
             display: true,
             labels: {
                 usePointStyle: true,
-                padding: 40
-            }
+                padding: 40,
+            },
         },
         devicePixelRatio: 2,
         plugins: {
             bar: false,
-            foo: {}
-        }
-    }
+            foo: {},
+        },
+    },
 });
-chart.update({duration: 500, lazy: false, easing: 'linear'});
+chart.update({ duration: 500, lazy: false, easing: 'linear' });
 
 console.log(chart.getDatasetMeta(0));
 
@@ -106,7 +106,7 @@ chart.config.options = {
     legend: {
         display: false,
     },
-    legendCallback: () => 'legend replacement'
+    legendCallback: () => 'legend replacement',
 };
 chart.update();
 const customLegend = chart.generateLegend();
@@ -117,7 +117,7 @@ const tickOptions: Chart.LinearTickOptions = {
     max: 100,
     stepSize: 33,
     display: false,
-    beginAtZero: true
+    beginAtZero: true,
 };
 const scaleOptions: Chart.RadialLinearScale = {
     ticks: tickOptions,
@@ -130,26 +130,28 @@ const scaleOptions: Chart.RadialLinearScale = {
     },
 };
 const radarChartOptions: Chart.RadialChartOptions = {
-    legend: {display: false},
+    legend: { display: false },
     scale: scaleOptions,
     responsive: true,
 };
 const chartConfig: Chart.ChartConfiguration = {
     type: 'radar',
     data: {
-        labels: ['#apples', '#pears', '#apricots', '#acorns', '#amigas', "#orics"],
-        datasets: [{
-            label: "test",
-            lineTension: 0.15,
-            data: [1, 1, 2, 3, 5],
-            backgroundColor: '#37738353',
-            borderColor: '#37738353',
-            borderWidth: 3,
-            borderCapStyle: 'round',
-            fill: true
-        }]
+        labels: ['#apples', '#pears', '#apricots', '#acorns', '#amigas', '#orics'],
+        datasets: [
+            {
+                label: 'test',
+                lineTension: 0.15,
+                data: [1, 1, 2, 3, 5],
+                backgroundColor: '#37738353',
+                borderColor: '#37738353',
+                borderWidth: 3,
+                borderCapStyle: 'round',
+                fill: true,
+            },
+        ],
     },
-    options: radarChartOptions
+    options: radarChartOptions,
 };
 const radialChart: Chart = new Chart(new CanvasRenderingContext2D(), chartConfig);
 radialChart.update();
@@ -167,7 +169,7 @@ if (radialChart.chartArea) {
 Chart.Tooltip.positioners.custom = (elements: any[], eventPosition: Point) => {
     return {
         x: eventPosition.x,
-        y: eventPosition.y + 10
+        y: eventPosition.y + 10,
     };
 };
 

types/chart.js/index.d.ts

@@ -582,6 +582,7 @@ declare namespace Chart {
         gridLines?: GridLineOptions;
         barThickness?: number | "flex";
         maxBarThickness?: number;
+        minBarLength?: number;
         scaleLabel?: ScaleTitleOptions;
         time?: TimeScale;
         offset?: boolean;