\n );\n}\n```\n\n`ResponsiveBiaxialLine` fills its parent container β wrap it in an element with an explicit height, as shown above.\n\n## Demos\n\nThe snippets below are trimmed excerpts from [examples/App.tsx](examples/App.tsx). Run `npm run example` to see all of them live (see [Development](#development)).\n\nAll examples share this shape of data β two series with mismatched units:\n\n```tsx\nconst data = [\n {\n id: \"temperature (Β°C)\",\n data: [\n { x: \"Mon\", y: 12 },\n { x: \"Tue\", y: 15 },\n { x: \"Wed\", y: 11 },\n // ...\n ],\n },\n {\n id: \"revenue ($k)\",\n data: [\n { x: \"Mon\", y: 1200 },\n { x: \"Tue\", y: 1900 },\n { x: \"Wed\", y: 1400 },\n // ...\n ],\n },\n];\n```\n\n### 1. Unified bottom axis, left/right Y axes\n\n\n\nThe simplest biaxial layout: one shared bottom X axis, temperature on the left Y axis, revenue on the right Y axis. `axisInfo` is an array with one entry per series, in the same order as `data`.\n\n```tsx\n\n```\n\n### 2. Auto-spaced axes with slice tooltips\n\n\n\nGive only the first series a `left` axis and let `axisSpacing` stack any further axes on the same side automatically as series are toggled on/off in the legend. `enableSlices=\"x\"` plus `useMesh` enables hover-to-inspect slice tooltips.\n\n```tsx\n\n```\n\n### 3. Auto-spaced axes with points\n\n\n\nSame layout as above with `enablePoints` and a larger `pointSize` instead of a bare line.\n\n```tsx\n\n```\n\n### 4. Independent (unequal) X scales per series\n\n\n\nSeries don't need to share the same X categories at all β here the second series has twice as many x points as the first, plotted against its own independently-scaled X axis while both still share a Y position mapping via `lockYScale`.\n\n```tsx\nconst data = [\n { id: \"temperature (Β°C)\", data: [ /* 7 points: MonβSun */ ] },\n { id: \"temperature 2 (Β°C)\", data: [ /* 14 points: Mon 1βSun 2 */ ] },\n];\n\n\n```\n\n### 5. Nearest-value fallback for misaligned slices\n\n\n\nWhen a hovered slice doesn't line up exactly with a point on every series, `showNearest` borrows that series' closest raw data point instead of omitting it from the tooltip. The arrow in the tooltip (`β`/`β`) indicates which side it was borrowed from.\n\n```tsx\n\n```\n\n### 6. Curve intercept on a linear chart\n\n\n\n`showIntercept` goes a step further than `showNearest`: instead of borrowing the nearest raw point, it interpolates the series' own rendered curve to compute the value it would have at the slice's exact position β even on a plain `curve=\"linear\"` chart.\n\n```tsx\n\n```\n\n### 7. Curve intercept on a smoothed chart\n\n\n\n`showIntercept` is especially useful with smoothing curves like `curve=\"cardinal\"`, since the interpolated value follows the actual rendered (curved) path rather than a straight line between raw points.\n\n```tsx\n\n```\n\n### 8. Custom slice tooltip\n\n\n\n`sliceTooltip` receives the full `SliceData`, including `isInterceptSlice` / `isInterceptNearestDirection` flags so you can visually distinguish exact readings from interpolated or borrowed ones.\n\n```tsx\nimport { LineSeries, Point, SliceTooltipComponent } from \"nivo-biaxial-chart\";\n\nconst SliceTooltip: SliceTooltipComponent = ({ slice }) => {\n const rows = slice.points.map((point: Point) => ({\n name: point.seriesId.toString(),\n value: point.data.yFormatted,\n label: point.isInterceptSlice\n ? `${point.isInterceptNearestDirection === \"left\" ? \"β\" : \"β\"} ${point.data.xFormatted}`\n : point.data.xFormatted,\n color: point.color,\n }));\n\n return (\n
\n {rows.map((row) => (\n
\n {row.label}:\n {row.value}\n
\n ))}\n
\n );\n};\n\n;\n```\n\n### 9. Canvas rendering\n\nFor very large datasets, use the Canvas renderer instead of SVG. It shares the same props (minus SVG-only layers like `defs`/`fill`) and supports `pixelRatio` for high-DPI screens.\n\n```tsx\nimport { ResponsiveBiaxialLineCanvas } from \"nivo-biaxial-chart\";\n\n
\n \n
;\n```\n\n## API documentation\n\n### Exports\n\n| Export | Description |\n| --- | --- |\n| `BiaxialLine` | Non-responsive SVG chart; takes explicit `width`/`height`. |\n| `ResponsiveBiaxialLine` | SVG chart wrapped in Nivo's `ResponsiveWrapper`; fills its parent container. |\n| `LineBiaxialCanvas` | Non-responsive Canvas chart; takes explicit `width`/`height`. |\n| `ResponsiveBiaxialLineCanvas` | Canvas chart wrapped in `ResponsiveWrapper`. |\n| Types | `LineSeries`, `Point`, `SliceData`, `ComputedSeries`, `PointTooltipComponent`, `SliceTooltipComponent`, `AxisProps`, `CanvasAxisProps`, `LineSvgLayer`, `LineCanvasLayer`, and more β see [src/types.ts](src/types.ts) and [src/axes/types.ts](src/axes/types.ts). |\n\n### Data shape\n\n```ts\ntype AllowedValue = string | number | Date | null; // null marks a missing value\ntype LineSeries = {\n id: string | number;\n data: readonly { x: AllowedValue; y: AllowedValue }[];\n};\n```\n\n`data` is `readonly LineSeries[]`. Every downstream prop (`axisInfo`, `colors`, tooltips, layers) is indexed positionally against this array, in series order.\n\n### `ResponsiveBiaxialLine` / `BiaxialLine` props\n\nAll props are optional except `data`; defaults are listed below (see [src/defaults.ts](src/defaults.ts) for the source of truth).\n\n| Prop | Type | Default | Description |\n| --- | --- | --- | --- |\n| `data` | `readonly Series[]` | β | **Required.** The series to plot. |\n| `width` / `height` | `number` | β | Required on `BiaxialLine` only; `ResponsiveBiaxialLine` derives these from its container. |\n| `margin` | `Box` | β | Chart margins, e.g. `{ top, right, bottom, left }`. |\n| `xScale` | `ScaleSpec` | `{ type: 'point' }` | X scale config, per `@nivo/scales`. Applies per series unless overridden via `axisInfo`. |\n| `yScale` | `ScaleSpec` | `{ type: 'linear', min: 0, max: 'auto' }` | Y scale config. |\n| `lockYScale` | `boolean` | `false` | When `true`, all series share a single Y scale computed from the union of every series' Y values. X scales always remain independent per series. |\n| `axisSpacing` | `{ top?, right?, bottom?, left? }` | β | Pixel offset auto-stacked between axes rendered on the same side, in `axisInfo` order, skipping any side whose series is currently hidden (e.g. via legend toggling). |\n| `axisInfo` | `{ top?, right?, bottom?, left? }[]` | one entry with a `bottom`/`left` axis | Per-series axis configuration β see [`axisInfo`](#axisinfo) below. |\n| `curve` | `LineCurveFactoryId` | `'linear'` | d3-shape curve factory name, e.g. `'cardinal'`, `'monotoneX'`, `'step'`. |\n| `theme` | `PartialTheme` | β | Nivo theme object (same shape as `@nivo/core`'s `Theme`). |\n| `colors` | `OrdinalColorScaleConfig` | `{ scheme: 'nivo' }` | Series color scale, per `@nivo/colors`. |\n| `lineWidth` | `number` | `2` | Stroke width of each line. |\n| `enablePoints` | `boolean` | `true` | Render a dot at each data point. |\n| `pointSize` / `pointColor` / `pointBorderWidth` / `pointBorderColor` | β | `6` / `{ from: 'series.color' }` / `0` / `{ theme: 'background' }` | Point styling. |\n| `enableArea` / `areaBaselineValue` / `areaOpacity` | β | `false` / `0` / `0.2` | Fill the area under each line. |\n| `enableGridX` / `gridXValues` | `boolean` / `TicksSpec` | `true` | Vertical grid lines. |\n| `enableGridY` / `gridYValues` | `boolean` / `TicksSpec` | `true` | Horizontal grid lines. |\n| `legends` | `LegendProps[]` | `[]` | Legend configuration, per `@nivo/legends`. Set `toggleSerie: true` to allow clicking a legend entry to hide/show that series. |\n| `isInteractive` | `boolean` | `true` | Disable all mouse/touch interaction when `false`. |\n| `useMesh` | `boolean` (SVG only) | `false` | Render an invisible Voronoi mesh over the chart for more forgiving point/slice hover detection. |\n| `enableSlices` | `'x' \\| 'y' \\| false` (SVG only) | `false` | Enable slice tooltips along an axis. |\n| `showNearest` | `boolean` (SVG only) | `false` | In a slice, borrow a series' nearest raw data point when it has none exactly at that slice. |\n| `showIntercept` | `boolean` (SVG only) | `false` | In a slice, interpolate a series' rendered curve to compute its value at that slice instead of borrowing a raw point. Falls back to `showNearest` when interpolation isn't valid. |\n| `interceptPrecision` | `number` (SVG only) | `2` | Decimal places an interpolated intercept value is rounded to before formatting. |\n| `enableCrosshair` / `crosshairType` (SVG only) | `boolean` / `CrosshairType` | `true` / `'bottom-left'` | Crosshair shown on hover. |\n| `tooltip` | `PointTooltipComponent` | built-in | Custom component for single-point tooltips. |\n| `sliceTooltip` | `SliceTooltipComponent` (SVG only) | built-in | Custom component for slice tooltips β see [Custom tooltips](#custom-tooltips). |\n| `layers` | `LineLayerId[] \\| LineCustomLayer[]` | `['grid','markers','axes','areas','crosshair','lines','points','slices','mesh','legends']` | Override chart layer order, or inject custom render layers. |\n| `initialHiddenIds` | `Series['id'][]` | `[]` | Series ids hidden on first render. |\n| `animate` / `motionConfig` | `boolean` / `MotionProps['motionConfig']` | `true` / `'gentle'` | react-spring animation settings. |\n| `onMouseEnter` / `onMouseMove` / `onMouseLeave` / `onMouseDown` / `onMouseUp` / `onClick` / `onDoubleClick` | `PointOrSliceMouseHandler` | β | Mouse event handlers, receiving the hovered `Point` or `SliceData`. |\n| `onTouchStart` / `onTouchMove` / `onTouchEnd` | `PointOrSliceTouchHandler` | β | Touch equivalents. |\n| `role` / `ariaLabel` / `ariaLabelledBy` / `ariaDescribedBy` / `isFocusable` (SVG only) | β | `'img'` / β / β / β / `false` | Accessibility attributes. |\n| `renderWrapper` | `boolean` | `true` | Whether to wrap the chart in Nivo's `Container`/theme provider. Set `false` if you're already inside one. |\n\n### `axisInfo`\n\n`axisInfo` is an array of axis configs, **one entry per series, in `data` order**. Each entry may define a `top`, `right`, `bottom`, and/or `left` axis for that series:\n\n```tsx\naxisInfo={[\n {\n left: { legend: \"temperature (Β°C)\", legendOffset: -45, legendPosition: \"middle\" },\n bottom: { tickSize: 5, tickPadding: 5 },\n },\n {\n right: { legend: \"revenue ($k)\", legendOffset: 60, legendPosition: \"middle\" },\n bottom: { tickSize: 5, tickPadding: 5 },\n },\n]}\n```\n\nA series with no entry (or `null` for a given side) renders no axis on that side β useful when several series should share a single already-rendered axis (combine with `lockYScale` and/or `axisSpacing`).\n\nEach axis config (`AxisProps`) supports: `tickValues`, `tickSize`, `tickPadding`, `tickRotation`, `tickOffset`, `domainLineOffset`, `hideDomain`, `format`, `truncateTickAt`, `renderTick`, `legend`, `legendPosition`, `legendOffset`, `ariaHidden`. The Canvas variant's `CanvasAxisProps` is identical except `legend` must be a plain `string` (no `ReactNode`).\n\n### `axisSpacing`\n\nWhen more than one axis renders on the same side (e.g. two series both have a `left` axis), `axisSpacing` auto-stacks them outward by the given pixel amount per side, and re-collapses the gap left by any series currently hidden via the legend:\n\n```tsx\naxisSpacing={{ bottom: 36, left: 60 }}\n```\n\n### Slices, `showNearest`, and `showIntercept`\n\nBecause each series can have its own independent scale, \"the same\" x position can land a few pixels apart between series. `enableSlices=\"x\"` groups nearby points into a `SliceData` for tooltip purposes; when a series has no point exactly inside a slice, two strategies fill the gap:\n\n- **`showNearest`** β use that series' closest actual data point. The resulting `Point.nearestDirection` (`'left' | 'right'`) tells you which side it was borrowed from.\n- **`showIntercept`** β interpolate the series' rendered curve at the slice's position (works especially well with smoothing curves like `curve=\"cardinal\"`). Sets `Point.isInterceptSlice = true`, with `Point.isInterceptNearestDirection` indicating which side the axis value itself was borrowed from (interpolation only ever produces the missing coordinate, not a formatted axis label). Falls back to `showNearest` when the slice falls outside that series' plotted range or its scale can't be inverted.\n\nEnable one, both, or neither β with both off, a series only ever appears in a slice it exactly falls within.\n\n### Custom tooltips\n\n- `tooltip: PointTooltipComponent` β receives `{ point: Point }` for single-point hover tooltips.\n- `sliceTooltip: SliceTooltipComponent` β receives `{ axis: 'x' | 'y', slice: SliceData }`, where `slice.points` is the array of `Point` in that slice (including any nearest/intercept-filled ones, flagged as described above).\n\n### Canvas variant\n\n`LineBiaxialCanvas` / `ResponsiveBiaxialLineCanvas` share the common props above, minus SVG-only features (`defs`, `fill`, `useMesh`, `enableSlices`, `showNearest`, `showIntercept`, `sliceTooltip`, `crosshairType`, aria props). They add:\n\n| Prop | Type | Default | Description |\n| --- | --- | --- | --- |\n| `pixelRatio` | `number` | `window.devicePixelRatio` (or `1` server-side) | Canvas pixel density, for crisp rendering on high-DPI displays. |\n| `layers` | `LineCanvasLayer[]` | same layer list as SVG | Canvas draws with an imperative `(context, props) => void` layer signature instead of React components for custom layers. |\n\n### Theming\n\n`theme` accepts the same shape as `@nivo/core`'s `Theme` (exported here as `PartialTheme`) β axis, grid, legend, and tooltip styling:\n\n```tsx\nimport { PartialTheme } from \"nivo-biaxial-chart\";\n\nexport const theme: PartialTheme = {\n text: { fontSize: 12, fill: \"#333\" },\n axis: {\n domain: { line: { stroke: \"#777\", strokeWidth: 1 } },\n ticks: {\n line: { stroke: \"#777\", strokeWidth: 1 },\n text: { fontSize: 11, fill: \"#555\" },\n },\n legend: { text: { fontSize: 13, fill: \"#333\" } },\n },\n grid: { line: { stroke: \"#ddd\", strokeWidth: 1 } },\n legends: { text: { fontSize: 12, fill: \"#333\" } },\n tooltip: { container: { fontSize: 12 } },\n};\n```\n\n## Development\n\n```sh\nnpm install\nnpm run build # bundle to dist/ (esm, cjs, and .d.ts)\nnpm run tsc # type-check\nnpm run lint # lint\nnpm run example # run the example app in examples/ against the local src\n```\n\nThe example app ([examples/App.tsx](examples/App.tsx)) is the fastest way to explore every demo above interactively and is kept in sync with this README.\n\n## License\n\n[MIT](./LICENSE)\n","readmeFilename":"README.md"}