@neo4j-ndl/react-charts 1.2.13 → 1.3.0

package/lib/types/charts/tests/HorizontalBarWithVerticalSlider.d.ts

@@ -0,0 +1,38 @@
+/**
+ *
+ *  Copyright (c) "Neo4j"
+ *  Neo4j Sweden AB [http://neo4j.com]
+ *
+ *  This file is part of Neo4j.
+ *
+ *  Neo4j is free software: you can redistribute it and/or modify
+ *  it under the terms of the GNU General Public License as published by
+ *  the Free Software Foundation, either version 3 of the License, or
+ *  (at your option) any later version.
+ *
+ *  This program is distributed in the hope that it will be useful,
+ *  but WITHOUT ANY WARRANTY; without even the implied warranty of
+ *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ *  GNU General Public License for more details.
+ *
+ *  You should have received a copy of the GNU General Public License
+ *  along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+export declare const verticalSliderCategories: string[];
+export type VerticalSliderHarnessApi = {
+    /** Resolved layout of the first dataZoom component and the grid. */
+    getResolvedLayout: () => {
+        grid: {
+            right?: number | string;
+        };
+        slider: Record<string, unknown>;
+    };
+    /** Applies a zoom window through the slider's dataZoom action. */
+    zoomTo: (start: number, end: number) => void;
+};
+/**
+ * Horizontal bar chart (value x-axis, category y-axis) with a slider bound to
+ * the category axis, which Needle lays out as a vertical slider on the right.
+ */
+export declare const HorizontalBarWithVerticalSlider: () => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=HorizontalBarWithVerticalSlider.d.ts.map

package/lib/types/charts/tests/HorizontalBarWithVerticalSlider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"HorizontalBarWithVerticalSlider.d.ts","sourceRoot":"","sources":["../../../../src/charts/tests/HorizontalBarWithVerticalSlider.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAMH,eAAO,MAAM,wBAAwB,UASpC,CAAC;AAYF,MAAM,MAAM,wBAAwB,GAAG;IACrC,oEAAoE;IACpE,iBAAiB,EAAE,MAAM;QACvB,IAAI,EAAE;YAAE,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;SAAE,CAAC;QAClC,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;KACjC,CAAC;IACF,kEAAkE;IAClE,MAAM,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;CAC9C,CAAC;AAWF;;;GAGG;AACH,eAAO,MAAM,+BAA+B,+CAoC3C,CAAC"}

package/lib/types/charts/utils/build-chart-option.d.ts

@@ -25,7 +25,6 @@ type BuildChartOptionParams = {
     dataZoom: EChartsOption['dataZoom'];
     dataset: ChartProps['dataset'];
     hasCategoryXAxis: boolean;
-    hasSliderZoom: boolean;
     legendSelected: Record<string, boolean>;
     propsSeries: ChartProps['series'];
     series: EchartsSeries;
@@ -37,9 +36,15 @@ type BuildChartOptionParams = {
     hasMarkArea: boolean;
 };
 /**
- * Slider zoom needs extra bottom grid space for ECharts' slider control.
+ * Horizontal slider zoom needs extra bottom grid space for ECharts' slider
+ * control.
  */
-export declare function hasSliderDataZoom(dataZoom: EChartsOption['dataZoom']): boolean;
+export declare function hasHorizontalSliderZoom(dataZoom: EChartsOption['dataZoom']): boolean;
+/**
+ * Vertical slider zoom needs extra right grid space for ECharts' slider
+ * control.
+ */
+export declare function hasVerticalSliderZoom(dataZoom: EChartsOption['dataZoom']): boolean;
 /**
  * Reserves the area occupied by bottom-positioned horizontal slider controls.
  *
@@ -49,6 +54,14 @@ export declare function hasSliderDataZoom(dataZoom: EChartsOption['dataZoom']):
  * reserve because they cannot be resolved without the rendered chart size.
  */
 export declare function getSliderBottomOuterBound(dataZoom: EChartsOption['dataZoom']): number | undefined;
+/**
+ * Reserves the area occupied by right-positioned vertical slider controls,
+ * mirroring `getSliderBottomOuterBound` for horizontal ones. Normalized
+ * sliders use pixel values; custom percentage-based layouts fall back to the
+ * 60px reserve because they cannot be resolved without the rendered chart
+ * size.
+ */
+export declare function getSliderRightOuterBound(dataZoom: EChartsOption['dataZoom']): number | undefined;
 /**
  * Mark area needs extra top grid space to fit inside the chart.
  */
@@ -61,6 +74,6 @@ export declare function hasCategoryXAxis(xAxis: EChartsOption['xAxis']): boolean
  * Builds the ECharts option object from Needle chart props and derived values.
  * Applying the option to an ECharts instance happens in `useChartOption`.
  */
-export declare function buildChartOption({ dataZoom, dataset, hasCategoryXAxis, hasSliderZoom, legendSelected, propsSeries, series, thresholdLines, toolboxOptions, userOption, xAxis, yAxis, hasMarkArea, }: BuildChartOptionParams): EChartsOption;
+export declare function buildChartOption({ dataZoom, dataset, hasCategoryXAxis, legendSelected, propsSeries, series, thresholdLines, toolboxOptions, userOption, xAxis, yAxis, hasMarkArea, }: BuildChartOptionParams): EChartsOption;
 export {};
 //# sourceMappingURL=build-chart-option.d.ts.map

package/lib/types/charts/utils/build-chart-option.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"build-chart-option.d.ts","sourceRoot":"","sources":["../../../../src/charts/utils/build-chart-option.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,OAAO,KAAK,EAA2B,aAAa,EAAE,MAAM,SAAS,CAAC;AAItE,OAAO,KAAK,EAAE,UAAU,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AAC/D,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,aAAa,CAAC;AAM3D,KAAK,sBAAsB,GAAG;IAC5B,QAAQ,EAAE,aAAa,CAAC,UAAU,CAAC,CAAC;IACpC,OAAO,EAAE,UAAU,CAAC,SAAS,CAAC,CAAC;IAC/B,gBAAgB,EAAE,OAAO,CAAC;IAC1B,aAAa,EAAE,OAAO,CAAC;IACvB,cAAc,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IACxC,WAAW,EAAE,UAAU,CAAC,QAAQ,CAAC,CAAC;IAClC,MAAM,EAAE,aAAa,CAAC;IACtB,cAAc,EAAE,uBAAuB,EAAE,CAAC;IAC1C,cAAc,EAAE,aAAa,CAAC,SAAS,CAAC,CAAC;IACzC,UAAU,EAAE,UAAU,CAAC,QAAQ,CAAC,CAAC;IACjC,KAAK,EAAE,aAAa,CAAC,OAAO,CAAC,CAAC;IAC9B,KAAK,EAAE,aAAa,CAAC,OAAO,CAAC,CAAC;IAC9B,WAAW,EAAE,OAAO,CAAC;CACtB,CAAC;AAEF;;GAEG;AACH,wBAAgB,iBAAiB,CAC/B,QAAQ,EAAE,aAAa,CAAC,UAAU,CAAC,GAClC,OAAO,CAMT;AAoBD;;;;;;;GAOG;AACH,wBAAgB,yBAAyB,CACvC,QAAQ,EAAE,aAAa,CAAC,UAAU,CAAC,GAClC,MAAM,GAAG,SAAS,CAoBpB;AAED;;GAEG;AACH,eAAO,MAAM,mBAAmB,GAAI,QAAQ,aAAa,YAGlC,CAAC;AAExB;;GAEG;AACH,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,aAAa,CAAC,OAAO,CAAC,GAAG,OAAO,CAIvE;AAED;;;GAGG;AACH,wBAAgB,gBAAgB,CAAC,EAC/B,QAAQ,EACR,OAAO,EACP,gBAAgB,EAChB,aAAa,EACb,cAAc,EACd,WAAW,EACX,MAAM,EACN,cAAc,EACd,cAAc,EACd,UAAU,EACV,KAAK,EACL,KAAK,EACL,WAAW,GACZ,EAAE,sBAAsB,GAAG,aAAa,CA2DxC"}
+{"version":3,"file":"build-chart-option.d.ts","sourceRoot":"","sources":["../../../../src/charts/utils/build-chart-option.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,OAAO,KAAK,EAA2B,aAAa,EAAE,MAAM,SAAS,CAAC;AAItE,OAAO,KAAK,EAAE,UAAU,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AAC/D,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,aAAa,CAAC;AAM3D,KAAK,sBAAsB,GAAG;IAC5B,QAAQ,EAAE,aAAa,CAAC,UAAU,CAAC,CAAC;IACpC,OAAO,EAAE,UAAU,CAAC,SAAS,CAAC,CAAC;IAC/B,gBAAgB,EAAE,OAAO,CAAC;IAC1B,cAAc,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IACxC,WAAW,EAAE,UAAU,CAAC,QAAQ,CAAC,CAAC;IAClC,MAAM,EAAE,aAAa,CAAC;IACtB,cAAc,EAAE,uBAAuB,EAAE,CAAC;IAC1C,cAAc,EAAE,aAAa,CAAC,SAAS,CAAC,CAAC;IACzC,UAAU,EAAE,UAAU,CAAC,QAAQ,CAAC,CAAC;IACjC,KAAK,EAAE,aAAa,CAAC,OAAO,CAAC,CAAC;IAC9B,KAAK,EAAE,aAAa,CAAC,OAAO,CAAC,CAAC;IAC9B,WAAW,EAAE,OAAO,CAAC;CACtB,CAAC;AAKF;;;GAGG;AACH,wBAAgB,uBAAuB,CACrC,QAAQ,EAAE,aAAa,CAAC,UAAU,CAAC,GAClC,OAAO,CAKT;AAED;;;GAGG;AACH,wBAAgB,qBAAqB,CACnC,QAAQ,EAAE,aAAa,CAAC,UAAU,CAAC,GAClC,OAAO,CAKT;AAsBD;;;;;;;GAOG;AACH,wBAAgB,yBAAyB,CACvC,QAAQ,EAAE,aAAa,CAAC,UAAU,CAAC,GAClC,MAAM,GAAG,SAAS,CAmBpB;AAED;;;;;;GAMG;AACH,wBAAgB,wBAAwB,CACtC,QAAQ,EAAE,aAAa,CAAC,UAAU,CAAC,GAClC,MAAM,GAAG,SAAS,CAmBpB;AAED;;GAEG;AACH,eAAO,MAAM,mBAAmB,GAAI,QAAQ,aAAa,YAGlC,CAAC;AAExB;;GAEG;AACH,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,aAAa,CAAC,OAAO,CAAC,GAAG,OAAO,CAIvE;AAED;;;GAGG;AACH,wBAAgB,gBAAgB,CAAC,EAC/B,QAAQ,EACR,OAAO,EACP,gBAAgB,EAChB,cAAc,EACd,WAAW,EACX,MAAM,EACN,cAAc,EACd,cAAc,EACd,UAAU,EACV,KAAK,EACL,KAAK,EACL,WAAW,GACZ,EAAE,sBAAsB,GAAG,aAAa,CA6DxC"}

package/lib/types/charts/utils/user-option-utils.d.ts

@@ -23,6 +23,30 @@ import { type EchartsSeries, type HexColor, type NeedleSeries } from './chart-ty
 export declare const mergeSeries: (series: NeedleSeries, theme?: "light" | "dark", userOption?: Omit<EChartsOption, "series" | "dataset" | "legend" | "xAxis" | "yAxis">, palette?: HexColor[]) => EchartsSeries;
 export declare const mergeXAxis: (xAxis: EChartsOption["xAxis"], theme?: "light" | "dark") => EChartsOption["xAxis"];
 export declare const mergeYAxis: (yAxis: EChartsOption["yAxis"], theme?: "light" | "dark") => EChartsOption["yAxis"];
-export declare const mergeDataZoom: (dataZoom: EChartsOption["dataZoom"]) => EChartsOption["dataZoom"];
-export declare const mergeToolbox: (toolbox: EChartsOption["toolbox"]) => EChartsOption["toolbox"];
+type SingleDataZoomOption = Exclude<NonNullable<EChartsOption['dataZoom']>, unknown[]>;
+type MergeDataZoomAxes = {
+    xAxis?: EChartsOption['xAxis'];
+    yAxis?: EChartsOption['yAxis'];
+};
+export type DataZoomTargetAxes = {
+    xAxisIndices: number[];
+    yAxisIndices: number[];
+};
+/**
+ * Union of the axis indices targeted by all slider/inside entries in a
+ * dataZoom config, using the same per-entry resolution as ECharts (explicit
+ * axis indices first, then orientation).
+ */
+export declare const getDataZoomTargetAxes: (dataZoom: EChartsOption["dataZoom"]) => DataZoomTargetAxes;
+/**
+ * A slider is vertical when the consumer sets `orient: 'vertical'`, or when it
+ * only targets a y-axis, which makes ECharts infer the vertical orientation.
+ */
+export declare const isVerticalSlider: (dataZoom: SingleDataZoomOption | undefined) => boolean;
+export declare const mergeDataZoom: (dataZoom: EChartsOption["dataZoom"], axes?: MergeDataZoomAxes) => EChartsOption["dataZoom"];
+type MergeToolboxContext = MergeDataZoomAxes & {
+    dataZoom?: EChartsOption['dataZoom'];
+};
+export declare const mergeToolbox: (toolbox: EChartsOption["toolbox"], context?: MergeToolboxContext) => EChartsOption["toolbox"];
+export {};
 //# sourceMappingURL=user-option-utils.d.ts.map

package/lib/types/charts/utils/user-option-utils.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"user-option-utils.d.ts","sourceRoot":"","sources":["../../../../src/charts/utils/user-option-utils.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAGH,OAAO,EAAE,KAAK,aAAa,EAAqB,MAAM,SAAS,CAAC;AAKhE,OAAO,EACL,KAAK,aAAa,EAClB,KAAK,QAAQ,EACb,KAAK,YAAY,EAElB,MAAM,eAAe,CAAC;AAevB,eAAO,MAAM,WAAW,GACtB,QAAQ,YAAY,EACpB,QAAO,OAAO,GAAG,MAAgB,EACjC,aAAa,IAAI,CACf,aAAa,EACb,QAAQ,GAAG,SAAS,GAAG,QAAQ,GAAG,OAAO,GAAG,OAAO,CACpD,EACD,UAAU,QAAQ,EAAE,KACnB,aAkOF,CAAC;AAEF,eAAO,MAAM,UAAU,GACrB,OAAO,aAAa,CAAC,OAAO,CAAC,EAC7B,QAAO,OAAO,GAAG,MAAgB,KAChC,aAAa,CAAC,OAAO,CAyFvB,CAAC;AAEF,eAAO,MAAM,UAAU,GACrB,OAAO,aAAa,CAAC,OAAO,CAAC,EAC7B,QAAO,OAAO,GAAG,MAAgB,KAChC,aAAa,CAAC,OAAO,CAgFvB,CAAC;AAEF,eAAO,MAAM,aAAa,GACxB,UAAU,aAAa,CAAC,UAAU,CAAC,KAClC,aAAa,CAAC,UAAU,CA4B1B,CAAC;AAEF,eAAO,MAAM,YAAY,GACvB,SAAS,aAAa,CAAC,SAAS,CAAC,KAChC,aAAa,CAAC,SAAS,CAsBzB,CAAC"}
+{"version":3,"file":"user-option-utils.d.ts","sourceRoot":"","sources":["../../../../src/charts/utils/user-option-utils.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAGH,OAAO,EAAE,KAAK,aAAa,EAAqB,MAAM,SAAS,CAAC;AAKhE,OAAO,EACL,KAAK,aAAa,EAClB,KAAK,QAAQ,EACb,KAAK,YAAY,EAElB,MAAM,eAAe,CAAC;AAevB,eAAO,MAAM,WAAW,GACtB,QAAQ,YAAY,EACpB,QAAO,OAAO,GAAG,MAAgB,EACjC,aAAa,IAAI,CACf,aAAa,EACb,QAAQ,GAAG,SAAS,GAAG,QAAQ,GAAG,OAAO,GAAG,OAAO,CACpD,EACD,UAAU,QAAQ,EAAE,KACnB,aAkOF,CAAC;AAEF,eAAO,MAAM,UAAU,GACrB,OAAO,aAAa,CAAC,OAAO,CAAC,EAC7B,QAAO,OAAO,GAAG,MAAgB,KAChC,aAAa,CAAC,OAAO,CAyFvB,CAAC;AAEF,eAAO,MAAM,UAAU,GACrB,OAAO,aAAa,CAAC,OAAO,CAAC,EAC7B,QAAO,OAAO,GAAG,MAAgB,KAChC,aAAa,CAAC,OAAO,CAgFvB,CAAC;AAEF,KAAK,oBAAoB,GAAG,OAAO,CACjC,WAAW,CAAC,aAAa,CAAC,UAAU,CAAC,CAAC,EACtC,OAAO,EAAE,CACV,CAAC;AAEF,KAAK,iBAAiB,GAAG;IACvB,KAAK,CAAC,EAAE,aAAa,CAAC,OAAO,CAAC,CAAC;IAC/B,KAAK,CAAC,EAAE,aAAa,CAAC,OAAO,CAAC,CAAC;CAChC,CAAC;AAEF,MAAM,MAAM,kBAAkB,GAAG;IAC/B,YAAY,EAAE,MAAM,EAAE,CAAC;IACvB,YAAY,EAAE,MAAM,EAAE,CAAC;CACxB,CAAC;AA4CF;;;;GAIG;AACH,eAAO,MAAM,qBAAqB,GAChC,UAAU,aAAa,CAAC,UAAU,CAAC,KAClC,kBAqBF,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,gBAAgB,GAC3B,UAAU,oBAAoB,GAAG,SAAS,KACzC,OAYF,CAAC;AAyDF,eAAO,MAAM,aAAa,GACxB,UAAU,aAAa,CAAC,UAAU,CAAC,EACnC,OAAO,iBAAiB,KACvB,aAAa,CAAC,UAAU,CAwC1B,CAAC;AAEF,KAAK,mBAAmB,GAAG,iBAAiB,GAAG;IAC7C,QAAQ,CAAC,EAAE,aAAa,CAAC,UAAU,CAAC,CAAC;CACtC,CAAC;AAwDF,eAAO,MAAM,YAAY,GACvB,SAAS,aAAa,CAAC,SAAS,CAAC,EACjC,UAAU,mBAAmB,KAC5B,aAAa,CAAC,SAAS,CAyCzB,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@neo4j-ndl/react-charts",
-  "version": "1.2.13",
+  "version": "1.3.0",
   "sideEffects": false,
   "description": "React implementation of charts from Neo4j Design System",
   "keywords": [
@@ -56,8 +56,8 @@
   "peerDependencies": {
     "react": ">=19.0.0",
     "react-dom": ">=19.0.0",
-    "@neo4j-ndl/base": "^4.20.0",
-    "@neo4j-ndl/react": "^4.21.0"
+    "@neo4j-ndl/react": "^4.21.1",
+    "@neo4j-ndl/base": "^4.20.1"
   },
   "dependencies": {
     "classnames": "2.5.1",

package/skills/ndl-react-charts/SKILL.md

@@ -87,4 +87,4 @@ Import from `@neo4j-ndl/react-charts`.
 
 | Component | Docs | Accessibility | Examples |
 |-----------|------|---------------|----------|
-| `Chart` | [components/charts.md](components/charts.md) |  | 21 |
+| `Chart` | [components/charts.md](components/charts.md) |  | 23 |

package/skills/ndl-react-charts/components/charts.md

@@ -21,6 +21,25 @@ Import: `import { Chart } from '@neo4j-ndl/react-charts'`
 | `xAxis` | `XAXisOption \| XAXisOption[]` |  |  | X-axis configuration for the chart. |
 | `yAxis` | `YAXisOption \| YAXisOption[]` |  |  | Y-axis configuration for the chart. |
 
+**Data zoom sliders.** A `dataZoom` slider passed through `option` targets
+the x-axis unless it is bound to an axis explicitly, so on a horizontal bar
+chart it zooms the value axis rather than the categories. Bind the slider to
+the category axis with `yAxisIndex: [0]` (or set `orient: 'vertical'`) to
+page through the bars instead; Needle then lays the slider out vertically on
+the right of the chart and reserves grid space for it. Sliders that target a
+continuous (`value`, `time`, or `log`) axis default to `filterMode: 'none'`
+so out-of-window data is clipped rather than removed, while category-axis
+sliders keep ECharts' `'filter'` default so the opposite value axis rescales
+to the visible data.
+
+**Drag-to-zoom.** Dragging in the plot area zooms the axes your `dataZoom`
+config targets: entries bound to a y-axis (`yAxisIndex` or
+`orient: 'vertical'`) make the drag select a y band, entries on both axes
+make it select a rectangle, and without any `dataZoom` config the drag zooms
+the x-axis. Set `toolbox.feature.dataZoom` through `option` to override the
+derived axes explicitly. When every drag-targeted axis is continuous the
+drag defaults to `filterMode: 'none'`, matching the slider rule above.
+
 ### ChartEmpty
 
 | Prop | Type | Required | Default | Description |
@@ -1984,6 +2003,182 @@ const Component = () => {
 export default Component;
 ```
 
+### Slider Vertical
+
+```tsx
+import { Chart } from '@neo4j-ndl/react-charts';
+
+const Component = () => {
+  return (
+    // The Chart component requires its parent to have an explicit height.
+    // Without one the chart canvas collapses to 0px and nothing renders.
+    // You can also check the components documentation by hovering over it.
+    <div
+      style={{
+        border: '1px solid silver',
+        borderRadius: '10px',
+        height: '350px',
+        padding: '20px',
+        width: '100%',
+      }}
+    >
+      <Chart
+        legend={{
+          show: true,
+        }}
+        dataset={{
+          dimensions: ['language', 'Repositories'],
+          source: [
+            ['TypeScript', 124],
+            ['Python', 98],
+            ['Java', 87],
+            ['Go', 65],
+            ['Rust', 52],
+            ['Kotlin', 43],
+            ['Ruby', 31],
+            ['Swift', 27],
+            ['Elixir', 14],
+            ['Haskell', 8],
+          ],
+        }}
+        xAxis={{
+          type: 'value',
+        }}
+        yAxis={{
+          axisTick: {
+            alignWithLabel: true,
+          },
+          type: 'category',
+        }}
+        series={[
+          {
+            encode: {
+              x: 'Repositories',
+              y: 'language',
+            },
+            name: 'Repositories',
+            type: 'bar',
+          },
+        ]}
+        option={{
+          // A slider bound only to the category y-axis renders vertically on
+          // the right and pages through the bars. Sliders without an axis
+          // binding target the x-axis, which is the value axis in a
+          // horizontal bar chart.
+          dataZoom: [
+            {
+              type: 'slider',
+              yAxisIndex: [0],
+            },
+            // The inside zoom lets users pinch-zoom and drag-pan the visible
+            // category window directly in the plot area.
+            {
+              type: 'inside',
+              yAxisIndex: [0],
+            },
+          ],
+          // Drag-to-zoom in the plot area follows the axes the dataZoom
+          // config targets, so dragging zooms the category y-axis here — in
+          // sync with the slider. Set `toolbox.feature.dataZoom` to override.
+        }}
+      />
+    </div>
+  );
+};
+
+export default Component;
+```
+
+### Sliders Both Axes
+
+```tsx
+import { Chart } from '@neo4j-ndl/react-charts';
+
+const sampleData = [
+  ['time', 'response time', 'request volume'],
+  ...Array.from({ length: 180 }, (_, index) => {
+    const responseTime =
+      38 + Math.sin(index / 6) * 13 + Math.cos(index / 17) * 7;
+    const requestVolume =
+      48 + Math.cos(index / 8) * 18 + Math.sin(index / 23) * 9;
+
+    return [
+      index,
+      Number(responseTime.toFixed(2)),
+      Number(requestVolume.toFixed(2)),
+    ];
+  }),
+];
+
+const Component = () => {
+  return (
+    // The Chart component requires its parent to have an explicit height.
+    // Without one the chart canvas collapses to 0px and nothing renders.
+    // You can also check the components documentation by hovering over it.
+    <div
+      style={{
+        border: '1px solid silver',
+        borderRadius: '10px',
+        height: '350px',
+        padding: '20px',
+        width: '100%',
+      }}
+    >
+      <Chart
+        legend={{
+          show: true,
+        }}
+        dataset={[
+          {
+            source: sampleData,
+          },
+        ]}
+        series={[
+          {
+            encode: { x: 'time', y: 'response time' },
+            name: 'Response time',
+            type: 'line',
+          },
+          {
+            encode: { x: 'time', y: 'request volume' },
+            name: 'Request volume',
+            type: 'line',
+          },
+        ]}
+        xAxis={{
+          name: 'Time',
+          type: 'value',
+        }}
+        yAxis={{
+          name: 'Value',
+          type: 'value',
+        }}
+        option={{
+          // A horizontal slider on the x-axis at the bottom and a vertical
+          // one on the y-axis at the right. Grid space is reserved for both
+          // automatically.
+          dataZoom: [
+            {
+              type: 'slider',
+            },
+            {
+              type: 'slider',
+              yAxisIndex: [0],
+            },
+          ],
+          // Drag-to-zoom in the plot area follows the axes the dataZoom
+          // config targets: with sliders on both axes the drag selects a
+          // rectangle that zooms both, in sync with the sliders. Set
+          // `toolbox.feature.dataZoom` to override.
+        }}
+      />
+    </div>
+  );
+};
+
+export default Component;
+```
+
 ### Threshold Values
 
 ```tsx