fix: restore legacy LineChart point spacing

Author: olegberman

CHANGELOG.md

@@ -1,5 +1,12 @@
 # Changelog
 
+## v7.0.2
+
+- restore v6 point-slot spacing for the legacy root `LineChart` so custom
+  overlays remain aligned after upgrading to v7
+- clarify that edge-to-edge layout belongs to modern `/v2` charts and document
+  the legacy point-coordinate callbacks
+
 ## v7.0.1
 
 - refresh the npm README and package description with clearer chart coverage

docs/charts/legacy.md

@@ -49,6 +49,10 @@ const chartConfig = {
 
 ::chart-preview{id="legacy-line"}
 
+The legacy root `LineChart` preserves v6 point-slot spacing for existing
+overlays. For custom point content, prefer `renderDotContent`, which supplies
+the rendered `x` and `y` coordinates, instead of recalculating positions.
+
 ## BarChart
 
 ```tsx

docs/migration/from-v1.md

@@ -38,7 +38,10 @@ import { LineChart } from "react-native-chart-kit";
 />;
 ```
 
-The compatibility promise covers the common public API, not undocumented internals, exact SVG node order, or layout bugs that made labels clip.
+The compatibility promise covers the common public API and the legacy
+`LineChart` point spacing used by public render and callback props. It does not
+cover undocumented internals, exact SVG node order, or layout bugs that made
+labels clip.
 
 ## Modern API
 
@@ -76,7 +79,13 @@ v2 defaults prioritize correct mobile layout over pixel-perfect legacy spacing:
 - Scrollable charts use visible data windows instead of requiring manual SVG width hacks.
 - `null` values create line gaps by default in modern charts.
 
-Keep migrated charts on the legacy package path when they rely on old spacing during a transition. Do not use legacy spacing patterns for new charts.
+These layout differences apply to the modern `/v2` charts. The legacy root
+`LineChart` keeps the v6 point-slot spacing so existing overlays remain aligned.
+When adding custom content, prefer the `x` and `y` coordinates supplied by
+`renderDotContent` and `onDataPointClick` instead of duplicating chart geometry.
+
+Keep migrated charts on the legacy package path when they rely on old spacing
+during a transition. Do not use legacy spacing patterns for new charts.
 
 ## Package Paths
 

docs/migration/prop-mapping.md

@@ -108,6 +108,10 @@ Do not depend on:
 - exact SVG child order
 - old clipping and padding bugs
 - deep imports from implementation files
-- chart-specific hacks that depend on old pixel positions
 
-If a legacy chart needs one of those behaviors, keep it on the compatibility surface until there is an explicit modern extension point.
+The legacy root `LineChart` preserves v6 point-slot spacing for existing
+overlays. Prefer the `x` and `y` coordinates supplied by `renderDotContent` and
+`onDataPointClick` when adding or updating custom point content.
+
+If a legacy chart needs an unsupported behavior, keep it on the compatibility
+surface until there is an explicit modern extension point.

docs/troubleshooting.md

@@ -75,6 +75,9 @@ checkout of this repository.
 
 ## Compatibility Chart Looks Different From v1
 
-v2 compatibility preserves common props and data shapes, not pixel-perfect old bugs. Differences are expected when old behavior clipped labels, depended on SVG node order, or used undocumented internals.
+The legacy root import preserves common props, data shapes, and v6 `LineChart`
+point-slot spacing. It does not preserve old label-clipping bugs, exact SVG node
+order, or undocumented internals. The modern `/v2` charts intentionally use
+their own layout behavior.
 
 Use [the v1 migration guide](migration/from-v1.md) and [prop mapping](migration/prop-mapping.md) to decide whether the chart should stay on the compatibility surface or move to the modern API.

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-chart-kit",
-  "version": "7.0.1",
+  "version": "7.0.2",
   "description": "Beautiful React Native charts for dashboards, reports, and data-rich mobile apps.",
   "keywords": [
     "react-native",
@@ -104,7 +104,7 @@
     "test:unit": "vitest run --exclude \"packages/**/test/compat/**/*.test.ts\"",
     "test:coverage": "vitest run --coverage",
     "test:compat": "vitest run packages/core/test/compat",
-    "typecheck": "tsc --noEmit && npm run core:typecheck && npm run svg:typecheck && npm run rn:typecheck",
+    "typecheck": "tsc --noEmit && tsc -p tsconfig.test.json --noEmit && npm run core:typecheck && npm run svg:typecheck && npm run rn:typecheck",
     "core:typecheck": "tsc -p packages/core/tsconfig.json --noEmit && tsc -p packages/core/tsconfig.test.json --noEmit",
     "core:build": "tsc -p packages/core/tsconfig.json",
     "svg:typecheck": "tsc -p packages/svg-renderer/tsconfig.json --noEmit && tsc -p packages/svg-renderer/tsconfig.test.json --noEmit",

package.json

@@ -23,23 +23,11 @@ import AbstractChart, {
 } from "../../shared/AbstractChart";
 import { ChartData, Dataset } from "../../shared/types";
 import { getNumberProp } from "../../shared/utils";
+import { getLegacyLineChartPointX, getLegacyLineChartXMax } from "./geometry";
 import { LegendItem } from "./LegendItem";
 
 let AnimatedCircle = Animated.createAnimatedComponent(Circle);
 
-const getFiniteNumber = (value: unknown, fallback: number) => {
-  if (typeof value === "number") {
-    return Number.isFinite(value) ? value : fallback;
-  }
-
-  if (typeof value === "string") {
-    const parsed = Number.parseFloat(value);
-    return Number.isFinite(parsed) ? parsed : fallback;
-  }
-
-  return fallback;
-};
-
 export interface LineChartData extends ChartData {
   legend?: string[];
 }
@@ -249,22 +237,6 @@ class LineChart extends AbstractChart<LineChartProps, LineChartState> {
     return dataset.strokeWidth || this.props.chartConfig.strokeWidth || 3;
   };
 
-  getChartRightPadding = (data: Dataset[], withDots: boolean) => {
-    const propsForDots = this.props.chartConfig?.propsForDots ?? {};
-    const dotRadius = withDots ? getFiniteNumber(propsForDots.r, 4) : 0;
-    const dotStrokeWidth = withDots
-      ? getFiniteNumber(propsForDots.strokeWidth, 0)
-      : 0;
-    const maxStrokeWidth = data.reduce(
-      (maxWidth, dataset) => Math.max(maxWidth, this.getStrokeWidth(dataset)),
-      0
-    );
-
-    return Math.ceil(
-      Math.max(4, dotRadius + dotStrokeWidth / 2, maxStrokeWidth / 2)
-    );
-  };
-
   getDatas = (data: Dataset[]): number[] => {
     return data.reduce(
       (acc, item) =>
@@ -326,7 +298,12 @@ class LineChart extends AbstractChart<LineChartProps, LineChartState> {
           return;
         }
 
-        const cx = paddingRight + (i * (width - paddingRight)) / xMax;
+        const cx = getLegacyLineChartPointX({
+          index: i,
+          width,
+          paddingRight,
+          xMax
+        });
 
         const cy =
           ((baseHeight - this.calcHeight(x, datas, height)) / 4) * 3 +
@@ -497,10 +474,12 @@ class LineChart extends AbstractChart<LineChartProps, LineChartState> {
             3 +
           paddingTop;
         yValues.push(yval);
-        const xval =
-          paddingRight +
-          ((dataset.data.length - index - 1) * (width - paddingRight)) /
-            dataset.data.length;
+        const xval = getLegacyLineChartPointX({
+          index: dataset.data.length - index - 1,
+          width,
+          paddingRight,
+          xMax: dataset.data.length
+        });
         xValues.push(xval);
 
         yValuesLabel.push(
@@ -610,7 +589,12 @@ class LineChart extends AbstractChart<LineChartProps, LineChartState> {
           points={
             dataset.data
               .map((d, i) => {
-                const x = paddingRight + (i * (width - paddingRight)) / xMax;
+                const x = getLegacyLineChartPointX({
+                  index: i,
+                  width,
+                  paddingRight,
+                  xMax
+                });
 
                 const y =
                   ((baseHeight - this.calcHeight(d, datas, height)) / 4) * 3 +
@@ -619,10 +603,12 @@ class LineChart extends AbstractChart<LineChartProps, LineChartState> {
                 return `${x},${y}`;
               })
               .join(" ") +
-            ` ${
-              paddingRight +
-              ((width - paddingRight) / xMax) * (dataset.data.length - 1)
-            },${
+            ` ${getLegacyLineChartPointX({
+              index: dataset.data.length - 1,
+              width,
+              paddingRight,
+              xMax
+            })},${
               (height / 4) * 3 + paddingTop
             } ${paddingRight},${(height / 4) * 3 + paddingTop}`
           }
@@ -665,7 +651,12 @@ class LineChart extends AbstractChart<LineChartProps, LineChartState> {
       let lastPoint: string;
       const points = dataset.data.map((d, i) => {
         if (d === null) return lastPoint;
-        const x = (i * (width - paddingRight)) / xMax + paddingRight;
+        const x = getLegacyLineChartPointX({
+          index: i,
+          width,
+          paddingRight,
+          xMax
+        });
         const y =
           ((baseHeight - this.calcHeight(d, datas, height)) / 4) * 3 +
           paddingTop;
@@ -691,10 +682,7 @@ class LineChart extends AbstractChart<LineChartProps, LineChartState> {
   };
 
   getXMaxValues = (data: Dataset[]) => {
-    return data.reduce((acc, cur) => {
-      const xMax = Math.max(cur.data.length - 1, 1);
-      return xMax > acc ? xMax : acc;
-    }, 1);
+    return getLegacyLineChartXMax(data);
   };
 
   getBezierLinePoints = (
@@ -718,7 +706,14 @@ class LineChart extends AbstractChart<LineChartProps, LineChartState> {
     const xMax = this.getXMaxValues(data);
 
     const x = (i: number) =>
-      Math.floor(paddingRight + (i * (width - paddingRight)) / xMax);
+      Math.floor(
+        getLegacyLineChartPointX({
+          index: i,
+          width,
+          paddingRight,
+          xMax
+        })
+      );
 
     const baseHeight = this.calcBaseHeight(datas, height);
 
@@ -800,10 +795,12 @@ class LineChart extends AbstractChart<LineChartProps, LineChartState> {
           paddingTop,
           data
         }) +
-        ` L${
-          paddingRight +
-          ((width - paddingRight) / xMax) * (dataset.data.length - 1)
-        },${
+        ` L${getLegacyLineChartPointX({
+          index: dataset.data.length - 1,
+          width,
+          paddingRight,
+          xMax
+        })},${
           (height / 4) * 3 + paddingTop
         } L${paddingRight},${(height / 4) * 3 + paddingTop} Z`;
 
@@ -874,17 +871,8 @@ class LineChart extends AbstractChart<LineChartProps, LineChartState> {
       paddingBottom = 0
     } = style;
 
-    const chartRightPadding = this.getChartRightPadding(
-      data.datasets,
-      withDots
-    );
-    const chartWidth = Math.max(
-      width - chartRightPadding,
-      getFiniteNumber(paddingRight, 64) + 1
-    );
-
     const config = {
-      width: chartWidth,
+      width,
       height,
       verticalLabelRotation,
       horizontalLabelRotation
@@ -895,9 +883,6 @@ class LineChart extends AbstractChart<LineChartProps, LineChartState> {
     const hasScrollableData =
       withScrollableDot &&
       data.datasets.some((dataset) => dataset.data && dataset.data.length > 0);
-    const xAxisDataIntervalCount = this.getXMaxValues(data.datasets);
-    const xAxisLabelIntervalCount = Math.max(labels.length - 1, 1);
-
     let count = Math.min(...datas) === Math.max(...datas) ? 1 : 4;
     if (segments) {
       count = segments;
@@ -963,8 +948,7 @@ class LineChart extends AbstractChart<LineChartProps, LineChartState> {
                       ...config,
                       data: firstDataset.data,
                       paddingTop: paddingTop as number,
-                      paddingRight: paddingRight as number,
-                      xAxisIntervalCount: xAxisDataIntervalCount
+                      paddingRight: paddingRight as number
                     })
                   : withOuterLines
                     ? this.renderVerticalLine({
@@ -981,7 +965,6 @@ class LineChart extends AbstractChart<LineChartProps, LineChartState> {
                   labels,
                   paddingTop: paddingTop as number,
                   paddingRight: paddingRight as number,
-                  xAxisIntervalCount: xAxisLabelIntervalCount,
                   formatXLabel
                 })}
             </G>

src/charts/line/LineChart.tsx

@@ -0,0 +1,19 @@
+import type { Dataset } from "../../shared/types";
+
+export const getLegacyLineChartXMax = (data: Dataset[]) =>
+  data.reduce(
+    (maxLength, dataset) => Math.max(maxLength, dataset.data.length),
+    1
+  );
+
+export const getLegacyLineChartPointX = ({
+  index,
+  width,
+  paddingRight,
+  xMax
+}: {
+  index: number;
+  width: number;
+  paddingRight: number;
+  xMax: number;
+}) => paddingRight + (index * (width - paddingRight)) / Math.max(xMax, 1);