README.md

@@ -1,5 +1,11 @@
 ![React Charts Header](https://github.com/TanStack/react-charts/raw/main/media/repo-dark.png)
 
+
+# ⚠️ No Longer Maintained ⚠️
+This project is no longer actively maintained. No further updates, bug fixes, or support will be provided.
+
+----
+
 Simple, immersive and interactive charts for React
 
 <a href="https://twitter.com/intent/tweet?button_hashtag=TanStack" target="\_parent">

src/components/Chart.tsx

@@ -786,6 +786,15 @@ function sortDatumsBySecondaryPx<TDatum>(
   datums: Datum<TDatum>[],
   secondaryAxes: Axis<TDatum>[]
 ) {
+  if (secondaryAxes.every(d => d.stacked)) {
+    const differingInverts =
+      secondaryAxes.some(d => d.invert) && secondaryAxes.some(d => !d.invert)
+
+    if (!differingInverts) {
+      return datums
+    }
+  }
+
   return [...datums].sort((a, b) => {
     const aAxis = secondaryAxes.find(d => d.id === a.secondaryAxisId)
     const bAxis = secondaryAxes.find(d => d.id === b.secondaryAxisId)
@@ -796,14 +805,6 @@ function sortDatumsBySecondaryPx<TDatum>(
     const bPx =
       bAxis?.scale(bAxis.stacked ? b.stackData?.[1] : b.secondaryValue) ?? NaN
 
-    if ((aAxis || bAxis)?.stacked) {
-      return a.seriesIndex > b.seriesIndex
-        ? 1
-        : a.seriesIndex < b.seriesIndex
-        ? -1
-        : 0
-    }
-
     return aPx > bPx ? 1 : aPx < bPx ? -1 : 0
   })
 }

src/components/Tooltip.tsx

@@ -41,6 +41,7 @@ export function defaultTooltip<TDatum>(
     arrowPadding: options.arrowPadding ?? 7,
     // anchor: options.anchor ?? 'closest',
     render: options.render ?? TooltipRenderer,
+    showDatumInTooltip: options.showDatumInTooltip ?? (() => true),
   }
 }
 

src/components/TooltipRenderer.tsx

@@ -54,7 +54,9 @@ function TooltipRenderer<TDatum>(props: TooltipRendererProps<TDatum>) {
 
   const { tooltip, dark } = props.getOptions()
 
-  const groupDatums = props.focusedDatum?.tooltipGroup ?? []
+  const groupDatums = (props.focusedDatum?.tooltipGroup ?? []).filter(
+    datum => tooltip.showDatumInTooltip?.(datum) ?? true
+  )
 
   const resolvedShowCount = showCount % 2 === 0 ? showCount : showCount + 1
   const length = groupDatums.length

src/hooks/useSpring.ts

@@ -7,7 +7,7 @@ export function useSpring(
   config: [number, number, number],
   cb: (x: number) => void,
   immediate?: boolean,
-  debug?: boolean
+  _debug?: boolean
 ) {
   const springRef = React.useRef(new Spring(value, ...config))
   const getValue = useGetLatest(value)
@@ -17,16 +17,22 @@ export function useSpring(
     return springRef.current.done()
   })
 
-  // Immediate
+  const prevRef = React.useRef<any>()
+  const changed = prevRef.current !== value
+
   React.useEffect(() => {
-    if (immediate) {
-      springRef.current.snap(getValue())
+    if (changed) {
+      if (immediate) {
+        springRef.current.snap(getValue())
+        startRaf()
+        return
+      }
+      springRef.current.setEnd(value)
       startRaf()
-      return
     }
-    springRef.current.setEnd(value)
-    startRaf()
-  }, [debug, getValue, immediate, startRaf, stopRaf, value])
+
+    prevRef.current = value
+  })
 
   React.useEffect(() => {
     return () => {
@@ -54,3 +60,5 @@ export function useRaf(callback: () => any) {
     ),
   ]
 }
+
+// Test

src/types.ts

@@ -124,7 +124,8 @@ export type TooltipOptions<TDatum> = {
   render?: (props: TooltipRendererProps<TDatum>) => React.ReactNode
   // formatSecondary?: (d: unknown) => string | number
   // formatTertiary?: (d: unknown) => string | number
-  invert?: boolean
+  invert?: boolean,
+  showDatumInTooltip?: (datum: Datum<TDatum>) => boolean
 }
 
 export type ResolvedTooltipOptions<TDatum> = TSTB.Object.Required<

src/utils/buildAxis.linear.ts

@@ -647,34 +647,40 @@ function buildPrimaryBandScale<TDatum>(
   range: [number, number]
 ) {
   // Find the two closest points along axis
+  // Do not allow the band to be smaller than single pixel of the output range
 
   let impliedBandWidth: number = Math.max(...range)
+  const bandRange: number = Math.max(...range)
 
-  for (let i = 0; i < series.length; i++) {
-    const serie = series[i]
+  ;(() => {
+    for (let i = 0; i < series.length; i++) {
+      const serie = series[i]
 
-    for (let j = 0; j < serie.datums.length; j++) {
-      const d1 = serie.datums[j]
-      const one = scale(d1.primaryValue ?? NaN)
+      for (let j = 0; j < serie.datums.length; j++) {
+        const d1 = serie.datums[j]
+        const one = scale(d1.primaryValue ?? NaN)
 
-      for (let k = 0; k < serie.datums.length; k++) {
-        const d2 = serie.datums[k]
-        const two = scale(d2.primaryValue ?? NaN)
+        for (let k = 0; k < serie.datums.length; k++) {
+          const d2 = serie.datums[k]
+          const two = scale(d2.primaryValue ?? NaN)
 
-        if (one === two) {
-          continue
-        }
+          if (one === two) {
+            continue
+          }
+
+          const diff = Math.abs(Math.max(one, two) - Math.min(one, two))
 
-        const diff = Math.abs(Math.max(one, two) - Math.min(one, two))
+          if (diff < impliedBandWidth) {
+            impliedBandWidth = Math.max(diff, bandRange)
 
-        if (diff < impliedBandWidth) {
-          impliedBandWidth = diff
+            if (impliedBandWidth === bandRange) {
+              return
+            }
+          }
         }
       }
     }
-  }
-
-  const bandRange = Math.max(...range)
+  })()
 
   const bandDomain = d3Range(bandRange / impliedBandWidth)