@cdc/chart 4.26.6 → 4.26.10

package/src/components/LineChart/helpers.test.ts

@@ -20,6 +20,7 @@ describe('LineChart helpers', () => {
     const basePreliminaryData: PreliminaryDataItem[] = [
       {
         type: 'effect',
+        lineEffectScope: 'outgoing',
         seriesKeys: ['COVID-19'],
         column: 'Attribute',
         value: 'Dotted',
@@ -38,6 +39,7 @@ describe('LineChart helpers', () => {
       },
       {
         type: 'effect',
+        lineEffectScope: 'outgoing',
         seriesKeys: ['Influenza'],
         column: 'Attribute',
         value: 'Dotted',
@@ -56,14 +58,54 @@ describe('LineChart helpers', () => {
       }
     ]
 
+    describe('existing effect rules without a scope marker', () => {
+      it.each(['', 'Category'])('preserves adjacent segments for %s category data', dynamicCategory => {
+        const data = [
+          { Date: 'Oct.–Dec. 2024', Category: 'COVID-19', 'COVID-19': 5.2, Value: 5.2, Attribute: '' },
+          { Date: 'Jan.–Mar. 2025', Category: 'COVID-19', 'COVID-19': 5.7, Value: 5.7, Attribute: 'Dotted' },
+          { Date: 'Apr.–Jun. 2025', Category: 'COVID-19', 'COVID-19': 5.4, Value: 5.4, Attribute: 'Dotted' }
+        ]
+        const styles = createStyles({
+          preliminaryData: [{ ...basePreliminaryData[0], lineEffectScope: undefined, weight: 4 }],
+          data,
+          stroke: '#000',
+          strokeWidth: 2,
+          handleLineType: mockHandleLineType,
+          lineType: 'solid-line',
+          seriesKey: 'COVID-19',
+          dynamicCategory,
+          originalSeriesKey: 'Value'
+        })
+
+        expect(styles.map(style => style.strokeDasharray)).toEqual(['5 5', '5 5', '5 5'])
+        expect(styles.map(style => style.strokeWidth)).toEqual([4, 4, 4])
+      })
+
+      it('keeps an incoming effect when only the latest point matches', () => {
+        const styles = createStyles({
+          preliminaryData: basePreliminaryData.map(rule => ({ ...rule, lineEffectScope: undefined })),
+          data: [{ Attribute: '' }, { Attribute: 'Dotted' }],
+          stroke: '#000',
+          strokeWidth: 2,
+          handleLineType: mockHandleLineType,
+          lineType: 'solid-line',
+          seriesKey: 'COVID-19',
+          dynamicCategory: '',
+          originalSeriesKey: ''
+        })
+
+        expect(styles.map(style => style.strokeDasharray)).toEqual(['5 5', '5 5'])
+      })
+    })
+
     describe('with dynamic category data (single-row/tall format)', () => {
       const dynamicCategoryData = [
-        { Date: '10/5/2025', Category: 'COVID-19', Value: '43.6', Attribute: 'Dotted' },
-        { Date: '10/12/2025', Category: 'COVID-19', Value: '40.7', Attribute: '' },
-        { Date: '10/19/2025', Category: 'COVID-19', Value: '42.6', Attribute: 'Dotted' }
+        { Date: '10/5/2025', Category: 'COVID-19', Value: '43.6', Attribute: '' },
+        { Date: '10/12/2025', Category: 'COVID-19', Value: '40.7', Attribute: 'Dotted' },
+        { Date: '10/19/2025', Category: 'COVID-19', Value: '42.6', Attribute: '' }
       ]
 
-      it('should apply dashed style when Attribute matches effect value', () => {
+      it('should apply an isolated effect only to the segment leaving the matching point', () => {
         const styles = createStyles({
           preliminaryData: basePreliminaryData,
           data: dynamicCategoryData,
@@ -77,14 +119,51 @@ describe('LineChart helpers', () => {
         })
 
         expect(styles).toHaveLength(3)
-        // First point has Attribute="Dotted" - should be dashed
-        expect(styles[0].strokeDasharray).toBe('5 5')
-        // Second point has Attribute="" - but previous point was dashed, so it inherits
-        // Actually, the logic applies dashed to current AND previous point when effect is found
-        // Let's check what happens
-        expect(styles[1].strokeDasharray).toBe('5 5') // Inherits from next point's effect
-        // Third point has Attribute="Dotted" - should be dashed
-        expect(styles[2].strokeDasharray).toBe('5 5')
+        expect(styles.map(style => style.strokeDasharray)).toEqual([0, '5 5', 0])
+      })
+
+      it('should create a continuous effect range from consecutive matching points', () => {
+        const data = [
+          { Date: '10/5/2025', Category: 'COVID-19', Value: '43.6', Attribute: '' },
+          { Date: '10/12/2025', Category: 'COVID-19', Value: '40.7', Attribute: 'Dotted' },
+          { Date: '10/19/2025', Category: 'COVID-19', Value: '42.6', Attribute: 'Dotted' },
+          { Date: '10/26/2025', Category: 'COVID-19', Value: '44.1', Attribute: '' }
+        ]
+
+        const styles = createStyles({
+          preliminaryData: basePreliminaryData,
+          data,
+          stroke: '#000',
+          strokeWidth: 2,
+          handleLineType: mockHandleLineType,
+          lineType: 'solid-line',
+          seriesKey: 'COVID-19',
+          dynamicCategory: 'Category',
+          originalSeriesKey: 'Value'
+        })
+
+        expect(styles.map(style => style.strokeDasharray)).toEqual([0, '5 5', '5 5', 0])
+      })
+
+      it('should leave the incoming segment normal when only the final point matches', () => {
+        const data = [
+          { Date: '10/5/2025', Category: 'COVID-19', Value: '43.6', Attribute: '' },
+          { Date: '10/12/2025', Category: 'COVID-19', Value: '40.7', Attribute: 'Dotted' }
+        ]
+
+        const styles = createStyles({
+          preliminaryData: basePreliminaryData,
+          data,
+          stroke: '#000',
+          strokeWidth: 2,
+          handleLineType: mockHandleLineType,
+          lineType: 'solid-line',
+          seriesKey: 'COVID-19',
+          dynamicCategory: 'Category',
+          originalSeriesKey: 'Value'
+        })
+
+        expect(styles.map(style => style.strokeDasharray)).toEqual([0, 0])
       })
 
       it('should apply solid style when no effect matches', () => {
@@ -111,7 +190,7 @@ describe('LineChart helpers', () => {
       })
 
       it('should only match effects for the correct series', () => {
-        // Using Influenza series key with COVID data should not match
+        // Using an unconfigured series key with COVID data should not match
         const styles = createStyles({
           preliminaryData: basePreliminaryData,
           data: dynamicCategoryData,
@@ -119,14 +198,12 @@ describe('LineChart helpers', () => {
           strokeWidth: 2,
           handleLineType: mockHandleLineType,
           lineType: 'solid-line',
-          seriesKey: 'Influenza', // Different series
+          seriesKey: 'RSV', // Series not configured for an effect
           dynamicCategory: 'Category',
           originalSeriesKey: 'Value'
         })
 
-        // No effect should match since seriesKeys is ['COVID-19'] not ['Influenza']
-        // (assuming we use the COVID effect config)
-        expect(styles.every(s => s.strokeDasharray === 0 || s.strokeDasharray === '10 5')).toBe(true)
+        expect(styles.every(style => style.strokeDasharray === 0)).toBe(true)
       })
     })
 
@@ -134,6 +211,7 @@ describe('LineChart helpers', () => {
       const multiColumnPreliminaryData: PreliminaryDataItem[] = [
         {
           type: 'effect',
+          lineEffectScope: 'outgoing',
           seriesKeys: ['COVID-19'],
           column: 'COVID-19-Attribute',
           value: 'Dotted',
@@ -153,12 +231,12 @@ describe('LineChart helpers', () => {
       ]
 
       const multiColumnData = [
-        { Date: '10/5/2025', 'COVID-19': '43.6', 'COVID-19-Attribute': 'Dotted' },
-        { Date: '10/12/2025', 'COVID-19': '40.7', 'COVID-19-Attribute': '' },
-        { Date: '10/19/2025', 'COVID-19': '42.6', 'COVID-19-Attribute': 'Dotted' }
+        { Date: '10/5/2025', 'COVID-19': '43.6', 'COVID-19-Attribute': '' },
+        { Date: '10/12/2025', 'COVID-19': '40.7', 'COVID-19-Attribute': 'Dotted' },
+        { Date: '10/19/2025', 'COVID-19': '42.6', 'COVID-19-Attribute': '' }
       ]
 
-      it('should apply dashed style when attribute column matches', () => {
+      it('should apply an isolated effect only to the segment leaving the matching point', () => {
         const styles = createStyles({
           preliminaryData: multiColumnPreliminaryData,
           data: multiColumnData,
@@ -172,12 +250,7 @@ describe('LineChart helpers', () => {
         })
 
         expect(styles).toHaveLength(3)
-        // First point has attribute - dashed
-        expect(styles[0].strokeDasharray).toBe('5 5')
-        // Second point inherits from third point's effect
-        expect(styles[1].strokeDasharray).toBe('5 5')
-        // Third point has attribute - dashed
-        expect(styles[2].strokeDasharray).toBe('5 5')
+        expect(styles.map(style => style.strokeDasharray)).toEqual([0, '5 5', 0])
       })
     })
 
@@ -186,6 +259,7 @@ describe('LineChart helpers', () => {
         const preliminaryDataWithWeight: PreliminaryDataItem[] = [
           {
             type: 'effect',
+            lineEffectScope: 'outgoing',
             seriesKeys: ['COVID-19'],
             column: 'Attribute',
             value: 'Dotted',
@@ -206,9 +280,9 @@ describe('LineChart helpers', () => {
         ]
 
         const data = [
-          { Date: '10/5/2025', Category: 'COVID-19', Value: '43.6', Attribute: 'Dotted' },
-          { Date: '10/12/2025', Category: 'COVID-19', Value: '40.7', Attribute: '' },
-          { Date: '10/19/2025', Category: 'COVID-19', Value: '42.6', Attribute: 'Dotted' }
+          { Date: '10/5/2025', Category: 'COVID-19', Value: '43.6', Attribute: '' },
+          { Date: '10/12/2025', Category: 'COVID-19', Value: '40.7', Attribute: 'Dotted' },
+          { Date: '10/19/2025', Category: 'COVID-19', Value: '42.6', Attribute: '' }
         ]
 
         const styles = createStyles({
@@ -224,18 +298,15 @@ describe('LineChart helpers', () => {
         })
 
         expect(styles).toHaveLength(3)
-        // First point has effect with custom weight
-        expect(styles[0].strokeWidth).toBe(5)
-        // Second point inherits custom weight from next point's effect
-        expect(styles[1].strokeWidth).toBe(5)
-        // Third point has effect with custom weight
-        expect(styles[2].strokeWidth).toBe(5)
+        expect(styles.map(style => style.strokeWidth)).toEqual([2, 5, 2])
+        expect(styles.map(style => style.strokeDasharray)).toEqual([0, '5 5', 0])
       })
 
       it('should use default strokeWidth when preliminaryData has no weight', () => {
         const preliminaryDataNoWeight: PreliminaryDataItem[] = [
           {
             type: 'effect',
+            lineEffectScope: 'outgoing',
             seriesKeys: ['COVID-19'],
             column: 'Attribute',
             value: 'Dotted',
@@ -287,6 +358,7 @@ describe('LineChart helpers', () => {
         const preliminaryData: PreliminaryDataItem[] = [
           {
             type: 'effect',
+            lineEffectScope: 'outgoing',
             seriesKeys: ['COVID-19'],
             column: 'Attribute',
             value: 'Dotted',
@@ -306,7 +378,10 @@ describe('LineChart helpers', () => {
           }
         ]
 
-        const data = [{ Date: '10/5/2025', Category: 'COVID-19', Value: '43.6', Attribute: 'Dotted' }]
+        const data = [
+          { Date: '10/5/2025', Category: 'COVID-19', Value: '43.6', Attribute: 'Dotted' },
+          { Date: '10/12/2025', Category: 'COVID-19', Value: '40.7', Attribute: '' }
+        ]
 
         const styles = createStyles({
           preliminaryData,
@@ -320,7 +395,7 @@ describe('LineChart helpers', () => {
           originalSeriesKey: 'Value'
         })
 
-        expect(styles).toHaveLength(1)
+        expect(styles).toHaveLength(2)
         expect(styles[0].strokeWidth).toBe(expected)
       })
     })
@@ -570,5 +645,18 @@ describe('LineChart helpers', () => {
       expect(suppressedSegments.length).toBeGreaterThan(0)
       expect(suppressedSegments.every(segment => segment.weight === undefined)).toBe(true)
     })
+
+    it('returns no segments when a brushed dynamic-category series has no rows', () => {
+      const segments = createDataSegments({
+        data: [],
+        seriesKey: 'Influenza',
+        preliminaryData: [makeSuppression({ seriesKeys: ['Influenza'] })],
+        dynamicCategory: 'Category',
+        originalSeriesKey: 'Value',
+        colorScale: mockColorScale
+      })
+
+      expect(segments).toEqual([])
+    })
   })
 })

package/src/components/LineChart/helpers.ts

@@ -1,8 +1,6 @@
 import { DataItem, StyleProps, Style } from './LineChartProps'
 import { PreliminaryDataItem } from '../../types/ChartConfig'
 
-import _ from 'lodash'
-
 const isCalculable = value => !isNaN(parseFloat(value)) && isFinite(value)
 
 export const createStyles = (props: StyleProps): Style[] => {
@@ -57,16 +55,19 @@ export const createStyles = (props: StyleProps): Style[] => {
   }
 
   data.forEach((d, index) => {
-    const matchingPd: PreliminaryDataItem = getMatchingPd(d)
+    const matchingPd = getMatchingPd(d)
+    const preserveAdjacentSegments =
+      matchingPd && !matchingPd.style.includes('Circles') && matchingPd.lineEffectScope !== 'outgoing'
+    const hasStyledSegment = matchingPd && (preserveAdjacentSegments || index < data.length - 1)
 
-    let style: Style = matchingPd
+    const style: Style = hasStyledSegment
       ? createStyle(handleLineType(matchingPd.style), matchingPd.weight)
       : createStyle(handleLineType(lineType))
 
     styles.push(style)
 
-    // If matchingPd exists, update the previous style if there is a previous element
-    if (matchingPd && index > 0) {
+    // Existing rules also style the incoming segment, including a preliminary final point.
+    if (preserveAdjacentSegments && index > 0) {
       styles[index - 1] = createStyle(handleLineType(matchingPd.style), matchingPd.weight)
     }
   })
@@ -299,6 +300,8 @@ export const createDataSegments = props => {
 
     return (props.preliminaryData ?? []).some(pd => d?.[props.dynamicCategory] === props?.seriesKey)
   })
+  if (dynamicData.length === 0) return []
+
   const isSuppressed = (pd, dataItem) => {
     if (pd.type === 'effect' || pd.hideLineStyle) return false
 

package/src/components/LineChart/index.tsx

@@ -1,4 +1,4 @@
-import React, { useContext } from 'react'
+import React, { useContext, useId } from 'react'
 
 // VisX library imports
 import * as allCurves from '@visx/curve'
@@ -26,6 +26,7 @@ import { type ChartContext } from '../../types/ChartContext'
 import { type LineChartProps } from './LineChartProps'
 
 const LineChart = (props: LineChartProps) => {
+  const lineRaceMaskPrefix = `line-race-reveal-${useId().replace(/[^a-zA-Z0-9_-]/g, '')}`
   // prettier-ignore
   const {
     getXAxisData,
@@ -41,10 +42,12 @@ const LineChart = (props: LineChartProps) => {
     } = props
 
   const {
+    brushData,
     colorScale,
     config,
     formatNumber,
     handleLineType,
+    lineRaceProgress,
     parseDate,
     seriesHighlight,
     tableData,
@@ -60,16 +63,21 @@ const LineChart = (props: LineChartProps) => {
   })
   const { yScaleRight } = useRightAxis({ config, yMax, data: dataForRightAxis, updateConfig })
   const showSingleSeries = config.tooltips.singleSeries
+  const isLineRace = typeof lineRaceProgress === 'number'
+  const normalizedLineRaceProgress =
+    isLineRace && Number.isFinite(lineRaceProgress) ? Math.min(Math.max(lineRaceProgress, 0), 1) : 0
   if (!handleTooltipMouseOver) return
 
   const DEBUG = false
   const { lineDatapointStyle, showLineSeriesLabels, legend } = config
+  const activeRawData = Array.isArray(brushData) && brushData.length > 0 ? brushData : tableData
 
   const xPos = d => {
     return xScale(getXAxisData(d)) + (xScale.bandwidth ? xScale.bandwidth() / 2 : 0)
   }
 
   const tooltipPoints = []
+  const hasConfidenceIntervalBand = Boolean(config.confidenceKeys?.lower && config.confidenceKeys?.upper)
 
   return (
     <ErrorBoundary component='LineChart'>
@@ -79,12 +87,21 @@ const LineChart = (props: LineChartProps) => {
           const seriesData = config.runtime.series.find(item => item.dataKey === seriesKey)
           const _seriesKey = seriesData.dynamicCategory ? seriesData.originalDataKey : seriesKey
           const lineType = seriesData.type
+          const lineRaceMaskId = `${lineRaceMaskPrefix}-${index}`
           const seriesAxis = seriesData.axis || 'left'
+          const seriesColor = colorScale(config.runtime.seriesLabels[seriesKey])
           const displayArea =
             legend.behavior === 'highlight' || seriesHighlight.length === 0 || seriesHighlight.indexOf(seriesKey) !== -1
 
+          const _data = seriesData.dynamicCategory
+            ? data.filter(d => d[seriesData.dynamicCategory] === seriesKey)
+            : data
+          const activeRawSeriesData = seriesData.dynamicCategory
+            ? activeRawData.filter(d => d[seriesData.dynamicCategory] === seriesKey)
+            : activeRawData
+          const pointData = isLineRace ? activeRawSeriesData : _data
           const suppressedSegments = createDataSegments({
-            data: tableData,
+            data: activeRawSeriesData,
             seriesKey,
             preliminaryData: config.preliminaryData,
             dynamicCategory: seriesData.dynamicCategory,
@@ -94,30 +111,28 @@ const LineChart = (props: LineChartProps) => {
           const isSplitLine =
             config?.preliminaryData?.filter(pd => pd.style && !pd.style.includes('Circles')).length > 0
 
-          const _data = seriesData.dynamicCategory
-            ? data.filter(d => d[seriesData.dynamicCategory] === seriesKey)
-            : data
           const circleData = filterCircles(
             config?.preliminaryData,
-            tableData,
+            activeRawSeriesData,
             seriesKey,
             seriesData.dynamicCategory,
             _seriesKey
           )
 
           // Prepare sorted data for line and area rendering
-          const sortedData =
-            config.visualizationType == 'Bump Chart'
-              ? _data
-              : config.xAxis.type === 'date-time' || config.xAxis.type === 'date'
-              ? _data.sort((d1, d2) => {
-                  let x1 = getXAxisData(d1)
-                  let x2 = getXAxisData(d2)
-                  if (x1 < x2) return -1
-                  if (x2 < x1) return 1
-                  return 0
-                })
-              : _data
+          const sortedData = isLineRace
+            ? [..._data].sort((d1, d2) => xPos(d1) - xPos(d2))
+            : config.visualizationType == 'Bump Chart'
+            ? _data
+            : config.xAxis.type === 'date-time' || config.xAxis.type === 'date'
+            ? _data.sort((d1, d2) => {
+                let x1 = getXAxisData(d1)
+                let x2 = getXAxisData(d2)
+                if (x1 < x2) return -1
+                if (x2 < x1) return 1
+                return 0
+              })
+            : _data
 
           return (
             <Group
@@ -145,7 +160,7 @@ const LineChart = (props: LineChartProps) => {
                 fill={DEBUG ? 'red' : 'transparent'}
                 fillOpacity={0.05}
               />
-              {_data.map((d, dataIndex) => {
+              {pointData.map((d, dataIndex) => {
                 tooltipPoints.push({
                   color: colorScale(config.runtime.seriesLabels[seriesKey]),
                   seriesKey: _seriesKey,
@@ -155,7 +170,7 @@ const LineChart = (props: LineChartProps) => {
                 })
 
                 // Build array of point coordinates for intelligent label positioning
-                const dataPointsForSeries = _data
+                const dataPointsForSeries = pointData
                   .filter(item => isNumber(item[_seriesKey]))
                   .map(item => ({
                     x: xPos(item),
@@ -212,10 +227,11 @@ const LineChart = (props: LineChartProps) => {
                           mode='ALWAYS_SHOW_POINTS'
                           dataIndex={dataIndex}
                           tableData={tableData}
-                          data={_data}
+                          data={pointData}
                           d={d}
                           config={config}
                           seriesKey={_seriesKey}
+                          seriesColor={seriesColor}
                           displayArea={displayArea}
                           tooltipData={tooltipData}
                           xScale={xScale}
@@ -234,10 +250,11 @@ const LineChart = (props: LineChartProps) => {
                           mode='HOVER_POINTS'
                           dataIndex={dataIndex}
                           tableData={tableData}
-                          data={_data}
+                          data={pointData}
                           d={d}
                           config={config}
                           seriesKey={_seriesKey}
+                          seriesColor={seriesColor}
                           displayArea={displayArea}
                           xScale={xScale}
                           yScale={yScale}
@@ -255,10 +272,11 @@ const LineChart = (props: LineChartProps) => {
                         seriesIndex={index}
                         dataIndex={dataIndex}
                         tableData={tableData}
-                        data={_data}
+                        data={pointData}
                         d={d}
                         config={config}
                         seriesKey={_seriesKey}
+                        seriesColor={seriesColor}
                         displayArea={displayArea}
                         xScale={xScale}
                         yScale={yScale}
@@ -336,7 +354,7 @@ const LineChart = (props: LineChartProps) => {
               ) : (
                 <>
                   {/* Confidence Interval Band */}
-                  {config.confidenceKeys &&
+                  {hasConfidenceIntervalBand &&
                     config.series.map((seriesData, seriesKey) => {
                       if (seriesData.dynamicCategory) {
                         // Get unique categories from the data
@@ -383,7 +401,31 @@ const LineChart = (props: LineChartProps) => {
                     })}
 
                   {/* STANDARD LINE */}
+                  {isLineRace && (
+                    <mask id={lineRaceMaskId} maskUnits='userSpaceOnUse'>
+                      <LinePath
+                        data-line-race-reveal-path
+                        pathLength={1}
+                        curve={allCurves[seriesData.lineType]}
+                        data={sortedData}
+                        x={d => xPos(d)}
+                        y={d =>
+                          seriesAxis === 'Right'
+                            ? yScaleRight(getYAxisData(d, _seriesKey))
+                            : yScale(Number(getYAxisData(d, _seriesKey)))
+                        }
+                        fill='none'
+                        stroke='white'
+                        strokeWidth={(seriesData.weight || 2) + 2}
+                        strokeDasharray={`${normalizedLineRaceProgress} 1`}
+                        defined={(item, i) => {
+                          return item[_seriesKey] !== '' && item[_seriesKey] !== null && item[_seriesKey] !== undefined
+                        }}
+                      />
+                    </mask>
+                  )}
                   <LinePath
+                    data-line-race-series-path={isLineRace ? true : undefined}
                     curve={allCurves[seriesData.lineType]}
                     data={sortedData}
                     x={d => xPos(d)}
@@ -397,6 +439,7 @@ const LineChart = (props: LineChartProps) => {
                     strokeOpacity={1}
                     shapeRendering='geometricPrecision'
                     strokeDasharray={lineType ? handleLineType(lineType) : 0}
+                    mask={isLineRace ? `url(#${lineRaceMaskId})` : undefined}
                     defined={(item, i) => {
                       return item[_seriesKey] !== '' && item[_seriesKey] !== null && item[_seriesKey] !== undefined
                     }}
@@ -473,6 +516,7 @@ const LineChart = (props: LineChartProps) => {
               )}
               {/* Render series labels at end if each line if selected in the editor */}
               {showLineSeriesLabels &&
+                (!isLineRace || lineRaceProgress >= 1) &&
                 (config.runtime.lineSeriesKeys || config.runtime.seriesKeys).map(seriesKey => {
                   let lastDatum
                   for (let i = _data.length - 1; i >= 0; i--) {
@@ -481,9 +525,7 @@ const LineChart = (props: LineChartProps) => {
                       break
                     }
                   }
-                  if (!lastDatum || legend.position === 'right') {
-                    return <></>
-                  }
+                  if (!lastDatum || legend.position === 'right') return null
 
                   let labelText = config.runtime.seriesLabels[seriesKey] || seriesKey
                   // truncate labels longer that 10 chars
@@ -494,6 +536,7 @@ const LineChart = (props: LineChartProps) => {
 
                   return (
                     <Text
+                      key={seriesKey}
                       display={
                         legend.behavior === 'highlight' ||
                         (seriesHighlight.length === 0 && !legend.dynamicLegend) ||
@@ -541,6 +584,7 @@ const LineChart = (props: LineChartProps) => {
               <React.Fragment key={`series-${seriesKey}-point-${dataIndex}`}>
                 <LineChartCircle
                   mode='TOOLTIP_POINTS'
+                  seriesColor={color}
                   dataIndex={dataIndex}
                   tooltipPoint={d}
                   tableData={tableData}