From 665daa64cede783e7e3f09b07c4452b7c0761cd3 Mon Sep 17 00:00:00 2001 From: "akash.sonune" Date: Thu, 5 Feb 2026 15:27:26 +0530 Subject: [PATCH] fix(bar): prevent bar chart overflowing the graph when using dataZoom filterMode none with time axis. close #19972 --- src/chart/bar/BarView.ts | 7 +- ...ar-datazoom-filtermode-none-time-axis.html | 419 ++++++++++++++++++ 2 files changed, 423 insertions(+), 3 deletions(-) create mode 100644 test/bar-datazoom-filtermode-none-time-axis.html diff --git a/src/chart/bar/BarView.ts b/src/chart/bar/BarView.ts index a34cc153a0..17ef69f84f 100644 --- a/src/chart/bar/BarView.ts +++ b/src/chart/bar/BarView.ts @@ -92,14 +92,14 @@ type RealtimeSortConfig = { // Return a number, based on which the ordinal sorted. type OrderMapping = (dataIndex: number) => number; -function getClipArea(coord: CoordSysOfBar, data: SeriesData) { +function getClipArea(coord: CoordSysOfBar, data: SeriesData, strictClip?: boolean) { const coordSysClipArea = coord.getArea && coord.getArea(); if (isCoordinateSystemType(coord, 'cartesian2d')) { const baseAxis = coord.getBaseAxis(); // When boundaryGap is false or using time axis. bar may exceed the grid. // We should not clip this part. // See test/bar2.html - if (baseAxis.type !== 'category' || !baseAxis.onBand) { + if (!strictClip && (baseAxis.type !== 'category' || !baseAxis.onBand)) { const expandWidth = data.getLayout('bandWidth'); if (baseAxis.isHorizontal()) { (coordSysClipArea as CartesianCoordArea).x -= expandWidth; @@ -220,7 +220,8 @@ class BarView extends ChartView { } const needsClip = seriesModel.get('clip', true) || realtimeSortCfg; - const coordSysClipArea = getClipArea(coord, data); + const strictClip = seriesModel.get('clip', true); + const coordSysClipArea = getClipArea(coord, data, strictClip); // If there is clipPath created in large mode. Remove it. group.removeClipPath(); // We don't use clipPath in normal mode because we needs a perfect animation diff --git a/test/bar-datazoom-filtermode-none-time-axis.html b/test/bar-datazoom-filtermode-none-time-axis.html new file mode 100644 index 0000000000..b63fdf6875 --- /dev/null +++ b/test/bar-datazoom-filtermode-none-time-axis.html @@ -0,0 +1,419 @@ + + + + + + + + + + + + Issue #19972: Bar + Time Axis + DataZoom filterMode: none + + + +
+

Issue #19972: Bar Chart bars overflow out of the coordinate system

+

Scenario: filterMode: 'none' + series type: bar + x-axis type: time

+

Problem: On zooming in too much, the bars would go outside of the graph (beyond axis)

+

Expected: Bars should be clipped at the coordinate system boundary when clip: true

+

Test: Use the slider or mouse wheel to zoom in. Bars at the edges should be clipped, not overflow.

+
+ + +
+ + + +
+ + + +
+ + + +