@cdc/chart 4.26.5 → 4.26.6

package/src/components/HeatMap/tests/HeatMap.test.tsx

@@ -116,7 +116,7 @@ const buildHeatMapContext = () => {
       hide: false,
       position: 'bottom',
       style: 'gradient',
-      subStyle: 'smooth',
+      subStyle: 'linear blocks',
       hideBorder: {
         side: false,
         topBottom: true
@@ -264,7 +264,7 @@ const buildSeriesModeHeatMapContext = () => {
       hide: false,
       position: 'top',
       style: 'gradient',
-      subStyle: 'smooth',
+      subStyle: 'linear blocks',
       hideBorder: {
         side: false,
         topBottom: true
@@ -453,6 +453,28 @@ const getHeatMapPlotTop = (container: HTMLElement) => getTranslateY(container.qu
 describe('HeatMap', () => {
   it('renders cells with tooltip metadata from additional columns', () => {
     const context = buildHeatMapContext()
+    const rows = [
+      { month: '2024-02-01', North: 5, South: 7, notes: 'Severe', population: 2500 },
+      { month: '2024-01-01', North: 2, South: 4, notes: 'Low', population: 1000 }
+    ]
+
+    context.config.data = rows
+    context.config.filteredData = rows
+    context.config.excludedData = rows
+    context.filteredData = rows
+    context.excludedData = rows
+    context.rawData = rows
+    context.tableData = rows
+    ;(context.config as any).columns.population = {
+      label: 'Population',
+      tooltips: true,
+      dataTable: true,
+      prefix: '$',
+      suffix: ' residents',
+      roundToPlace: 0,
+      commas: true
+    }
+
     const { container } = render(
       <ConfigContext.Provider value={context}>
         <HeatMap parentWidth={800} parentHeight={320} />
@@ -469,6 +491,7 @@ describe('HeatMap', () => {
     expect(tooltipHtml).toContain('Region:')
     expect(tooltipHtml).toContain('Value:')
     expect(tooltipHtml).toContain('Notes')
+    expect(tooltipHtml).toContain('Population: $1,000 residents')
     expect(tooltipHtml).not.toContain('<br/>')
     expect(cells[0]?.getAttribute('tabindex')).toBe('0')
     expect(cells[0]?.getAttribute('aria-label')).toContain('Month: Tooltip 2024-01-01')
@@ -548,16 +571,20 @@ describe('HeatMap', () => {
 
   it('renders a gradient legend for the mapped value column', () => {
     const context = buildHeatMapContext()
+    ;(context.config as any).heatmap.colorBucketCount = 5
 
-    render(
+    const { container } = render(
       <ConfigContext.Provider value={context}>
         <HeatMapGradientLegend />
       </ConfigContext.Provider>
     )
 
+    const rangeLabels = Array.from(container.querySelectorAll('.cdc-heatmap__legend-range-label')).map(label =>
+      label.textContent?.trim()
+    )
+
     expect(screen.getByText('Value')).toBeTruthy()
-    expect(screen.getByText('2')).toBeTruthy()
-    expect(screen.getByText('7')).toBeTruthy()
+    expect(rangeLabels).toEqual(['2\u20133', '3\u20134', '4\u20135', '5\u20136', '6\u20137'])
   })
 
   it('renders HeatMap gradient legends as linear blocks', () => {
@@ -1003,6 +1030,7 @@ describe('HeatMap', () => {
     const yAxisHeading = screen.getByText('Left Value Axis')
     const dateCategoryHeading = screen.getByText('Date/Category Axis')
     const settingsHeading = screen.getByText('HeatMap Settings')
+    const legendHeading = screen.getByText('Legend')
     expect(yAxisHeading).toBeTruthy()
     expect(settingsHeading).toBeTruthy()
     expect(
@@ -1015,12 +1043,14 @@ describe('HeatMap', () => {
     fireEvent.click(dateCategoryHeading)
     fireEvent.click(settingsHeading)
     fireEvent.click(dataSeriesHeading)
+    fireEvent.click(legendHeading)
 
     const xAxisPositionLabel = screen.getByText('X-Axis Position')
+    const gradientStyleSelect = screen.getByLabelText('Gradient Style') as HTMLSelectElement
 
     expect(screen.queryByText('Value Column')).toBeNull()
-    expect(screen.getAllByText('Hide Axis')).toHaveLength(1)
-    expect(screen.getAllByText('Hide Ticks')).toHaveLength(1)
+    expect(screen.getAllByText('Hide Axis')).toHaveLength(2)
+    expect(screen.getAllByText('Hide Ticks')).toHaveLength(2)
     expect(screen.getAllByText('Tick rotation (Degrees)').length).toBeGreaterThan(0)
     expect(screen.getByLabelText('Label Placement')).toBeTruthy()
     expect(screen.getByText('Add Data Series')).toBeTruthy()
@@ -1036,5 +1066,7 @@ describe('HeatMap', () => {
     expect(screen.getByText('Column Label Gap')).toBeTruthy()
     expect(screen.getByLabelText(/Data Grouping/i)).toBeTruthy()
     expect(screen.getByText('Displaying Rows')).toBeTruthy()
+    expect(Array.from(gradientStyleSelect.options).map(option => option.value)).toEqual(['linear blocks'])
+    expect(screen.queryByLabelText('Tick Rotation (Degrees)')).toBeNull()
   })
 })

package/src/components/Legend/Legend.Component.tsx

@@ -242,7 +242,7 @@ const Legend: React.FC<LegendProps> = forwardRef(
                               </>
                             )}
                           </>
-                          <LegendLabel align='left' className='m-0 cove-prose'>
+                          <LegendLabel align='left' className='m-0'>
                             {parse(label.text)}
                           </LegendLabel>
                         </LegendItem>
@@ -361,7 +361,7 @@ const Legend: React.FC<LegendProps> = forwardRef(
                               />
                             </svg>
                           </span>
-                          <LegendLabel align='left' className='m-0 cove-prose'>
+                          <LegendLabel align='left' className='m-0'>
                             {parse(String((pattern as any)?.label || key))}
                           </LegendLabel>
                         </LegendItem>

package/src/components/Legend/helpers/createFormatLabels.test.ts

@@ -0,0 +1,88 @@
+import { scaleOrdinal } from '@visx/scale'
+import { describe, expect, it, vi } from 'vitest'
+import { createFormatLabels } from './createFormatLabels'
+import { ChartConfig } from '../../../types/ChartConfig'
+import { Label } from '../../../types/Label'
+
+const defaultLabels: Label[] = [
+  { datum: 'Series A', index: 0, text: 'Series A', value: '#aa0000' },
+  { datum: 'Series B', index: 1, text: 'Series B', value: '#00bb00' }
+]
+
+const buildConfig = (overrides: Partial<ChartConfig> = {}): ChartConfig =>
+  ({
+    visualizationType: 'Line',
+    visualizationSubType: 'regular',
+    general: {
+      palette: {
+        colorAssignmentMode: 'ordered'
+      }
+    },
+    legend: {},
+    smallMultiples: {
+      mode: 'by-series',
+      colorMode: 'same'
+    },
+    series: [
+      { dataKey: 'series_a', name: 'Series A', type: 'Line' },
+      { dataKey: 'series_b', name: 'Series B', type: 'Line' }
+    ],
+    runtime: {
+      seriesKeys: ['series_a', 'series_b'],
+      seriesLabels: {
+        series_a: 'Series A',
+        series_b: 'Series B'
+      },
+      seriesLabelsAll: ['Series A', 'Series B']
+    },
+    ...overrides
+  } as ChartConfig)
+
+const colorScale = scaleOrdinal({
+  domain: ['Series A', 'Series B'],
+  range: ['#aa0000', '#00bb00'],
+  unknown: null
+})
+
+const formatLabels = (config: ChartConfig) => createFormatLabels(config, [], [], colorScale, vi.fn())(defaultLabels)
+
+describe('createFormatLabels small multiples legend colors', () => {
+  it('uses the first color for by-series same-color legends by default', () => {
+    const labels = formatLabels(buildConfig())
+
+    expect(labels.map(label => label.value)).toEqual(['#aa0000', '#aa0000'])
+  })
+
+  it('preserves assigned series colors for by-series same-color legends', () => {
+    const labels = formatLabels(
+      buildConfig({
+        general: {
+          palette: {
+            colorAssignmentMode: 'by-value',
+            colorAssignments: [
+              { key: 'series_a', color: '#aa0000' },
+              { key: 'series_b', color: '#00bb00' }
+            ]
+          }
+        } as any
+      })
+    )
+
+    expect(labels.map(label => label.value)).toEqual(['#aa0000', '#00bb00'])
+  })
+
+  it('ignores stale assignments for by-series same-color legends', () => {
+    const labels = formatLabels(
+      buildConfig({
+        general: {
+          palette: {
+            colorAssignmentMode: 'by-value',
+            colorAssignments: [{ key: 'removed_series', color: '#00bb00' }]
+          }
+        } as any
+      })
+    )
+
+    expect(labels.map(label => label.value)).toEqual(['#aa0000', '#aa0000'])
+  })
+})

package/src/components/Legend/helpers/createFormatLabels.tsx

@@ -13,6 +13,7 @@ import { v2ColorDistribution } from '@cdc/core/helpers/palettes/colorDistributio
 import { updatePaletteNames } from '@cdc/core/helpers/updatePaletteNames'
 import { buildForecastPaletteMappings } from '../../../helpers/buildForecastPaletteMappings'
 import { getFullColorPalette } from '../../../helpers/smallMultiplesHelpers'
+import { hasSeriesColorAssignmentOverrides } from '../../../helpers/colorAssignmentHelpers'
 import { FaStar } from 'react-icons/fa'
 import { Label } from '../../../types/Label'
 import { ColorScale, TransformedData } from '../../../types/ChartContext'
@@ -36,7 +37,11 @@ export const createFormatLabels =
 
     // Handle small multiples legend adjustments
     // by-series + same: all tiles use same color, legend should show one color
-    if (config.smallMultiples?.mode === 'by-series' && config.smallMultiples?.colorMode === 'same') {
+    if (
+      config.smallMultiples?.mode === 'by-series' &&
+      config.smallMultiples?.colorMode === 'same' &&
+      !hasSeriesColorAssignmentOverrides(config)
+    ) {
       const baseColor = colorScale?.range()?.[0]
       return defaultLabels.map((label, i) => ({
         ...label,

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

@@ -1,5 +1,5 @@
 import { describe, it, expect, vi } from 'vitest'
-import { createStyles, filterCircles } from './helpers'
+import { createStyles, filterCircles, createDataSegments } from './helpers'
 import { PreliminaryDataItem } from '../../types/ChartConfig'
 
 describe('LineChart helpers', () => {
@@ -180,6 +180,150 @@ describe('LineChart helpers', () => {
         expect(styles[2].strokeDasharray).toBe('5 5')
       })
     })
+
+    describe('with custom weight', () => {
+      it('should apply custom weight from preliminaryData item', () => {
+        const preliminaryDataWithWeight: PreliminaryDataItem[] = [
+          {
+            type: 'effect',
+            seriesKeys: ['COVID-19'],
+            column: 'Attribute',
+            value: 'Dotted',
+            style: 'Dashed Small',
+            label: 'COVID Dotted',
+            displayTooltip: true,
+            displayLegend: true,
+            displayTable: true,
+            symbol: '',
+            iconCode: '',
+            lineCode: '',
+            hideBarSymbol: false,
+            hideLineStyle: false,
+            circleSize: 6,
+            displayGray: false,
+            weight: 5 // Custom weight
+          }
+        ]
+
+        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' }
+        ]
+
+        const styles = createStyles({
+          preliminaryData: preliminaryDataWithWeight,
+          data,
+          stroke: '#000',
+          strokeWidth: 2, // Default weight
+          handleLineType: mockHandleLineType,
+          lineType: 'solid-line',
+          seriesKey: 'COVID-19',
+          dynamicCategory: 'Category',
+          originalSeriesKey: 'Value'
+        })
+
+        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)
+      })
+
+      it('should use default strokeWidth when preliminaryData has no weight', () => {
+        const preliminaryDataNoWeight: PreliminaryDataItem[] = [
+          {
+            type: 'effect',
+            seriesKeys: ['COVID-19'],
+            column: 'Attribute',
+            value: 'Dotted',
+            style: 'Dashed Small',
+            label: 'COVID Dotted',
+            displayTooltip: true,
+            displayLegend: true,
+            displayTable: true,
+            symbol: '',
+            iconCode: '',
+            lineCode: '',
+            hideBarSymbol: false,
+            hideLineStyle: false,
+            circleSize: 6,
+            displayGray: false
+            // No weight property
+          }
+        ]
+
+        const data = [{ Date: '10/5/2025', Category: 'COVID-19', Value: '43.6', Attribute: 'Dotted' }]
+
+        const styles = createStyles({
+          preliminaryData: preliminaryDataNoWeight,
+          data,
+          stroke: '#000',
+          strokeWidth: 2,
+          handleLineType: mockHandleLineType,
+          lineType: 'solid-line',
+          seriesKey: 'COVID-19',
+          dynamicCategory: 'Category',
+          originalSeriesKey: 'Value'
+        })
+
+        expect(styles).toHaveLength(1)
+        // Should use default strokeWidth when no custom weight
+        expect(styles[0].strokeWidth).toBe(2)
+      })
+
+      it.each([
+        { weight: 5, expected: 5, label: 'applies a valid custom weight' },
+        { weight: 1, expected: 1, label: 'applies the minimum custom weight of 1' },
+        { weight: 9, expected: 9, label: 'applies the maximum custom weight of 9' },
+        { weight: 0.5, expected: 2, label: 'falls back to default for a weight below 1' },
+        { weight: 0, expected: 2, label: 'falls back to default for a weight of 0' },
+        { weight: -1, expected: 2, label: 'falls back to default for negative weight' },
+        { weight: '', expected: 2, label: 'falls back to default for empty string' },
+        { weight: 'abc', expected: 2, label: 'falls back to default for non-numeric weight' }
+      ])('$label', ({ weight, expected }) => {
+        const preliminaryData: PreliminaryDataItem[] = [
+          {
+            type: 'effect',
+            seriesKeys: ['COVID-19'],
+            column: 'Attribute',
+            value: 'Dotted',
+            style: 'Dashed Small',
+            label: 'COVID Dotted',
+            displayTooltip: true,
+            displayLegend: true,
+            displayTable: true,
+            symbol: '',
+            iconCode: '',
+            lineCode: '',
+            hideBarSymbol: false,
+            hideLineStyle: false,
+            circleSize: 6,
+            displayGray: false,
+            weight: weight as PreliminaryDataItem['weight']
+          }
+        ]
+
+        const data = [{ Date: '10/5/2025', Category: 'COVID-19', Value: '43.6', Attribute: 'Dotted' }]
+
+        const styles = createStyles({
+          preliminaryData,
+          data,
+          stroke: '#000',
+          strokeWidth: 2,
+          handleLineType: mockHandleLineType,
+          lineType: 'solid-line',
+          seriesKey: 'COVID-19',
+          dynamicCategory: 'Category',
+          originalSeriesKey: 'Value'
+        })
+
+        expect(styles).toHaveLength(1)
+        expect(styles[0].strokeWidth).toBe(expected)
+      })
+    })
   })
 
   describe('filterCircles', () => {
@@ -244,6 +388,21 @@ describe('LineChart helpers', () => {
         expect(circles[1].isFilled).toBe(false)
       })
 
+      it('should skip open circles for nonnumeric values while preserving zero values', () => {
+        const data = [
+          { Date: '10/5/2025', Category: 'COVID-19', Value: 'N/A', Attribute: 'Marked' },
+          { Date: '10/12/2025', Category: 'COVID-19', Value: null, Attribute: 'Marked' },
+          { Date: '10/19/2025', Category: 'COVID-19', Value: 0, Attribute: 'Marked' },
+          { Date: '10/26/2025', Category: 'COVID-19', Value: '12.3', Attribute: 'Marked' }
+        ]
+
+        const circles = filterCircles(circlesPreliminaryData, data, 'COVID-19', 'Category', 'Value')
+
+        expect(circles).toHaveLength(2)
+        expect(circles.map(circle => circle.data.Value)).toEqual([0, '12.3'])
+        expect(circles.every(circle => circle.isFilled === false)).toBe(true)
+      })
+
       it('should return empty array when no matches', () => {
         const circles = filterCircles(
           circlesPreliminaryData,
@@ -340,6 +499,76 @@ describe('LineChart helpers', () => {
         expect(circles[0].isFilled).toBe(true)
         expect(circles[0].size).toBe(6)
       })
+
+      it('should skip filled circles for nonnumeric values while preserving zero values', () => {
+        const data = [
+          { Date: '10/5/2025', Category: 'Influenza', Value: 'N/A', Attribute: 'Marked' },
+          { Date: '10/12/2025', Category: 'Influenza', Value: null, Attribute: 'Marked' },
+          { Date: '10/19/2025', Category: 'Influenza', Value: 0, Attribute: 'Marked' },
+          { Date: '10/26/2025', Category: 'Influenza', Value: '12.3', Attribute: 'Marked' }
+        ]
+
+        const circles = filterCircles(filledCirclesConfig, data, 'Influenza', 'Category', 'Value')
+
+        expect(circles).toHaveLength(2)
+        expect(circles.map(circle => circle.data.Value)).toEqual([0, '12.3'])
+      })
+    })
+  })
+
+  describe('createDataSegments', () => {
+    const mockColorScale = vi.fn(() => '#000')
+
+    const makeSuppression = (overrides: Partial<PreliminaryDataItem> = {}): PreliminaryDataItem => ({
+      type: 'suppression',
+      seriesKeys: ['COVID-19'],
+      column: '',
+      value: 'Suppressed',
+      style: 'Dashed Small',
+      label: 'Suppressed',
+      displayTooltip: true,
+      displayLegend: true,
+      displayTable: true,
+      symbol: '',
+      iconCode: '',
+      lineCode: '',
+      hideBarSymbol: false,
+      hideLineStyle: false,
+      circleSize: 6,
+      displayGray: false,
+      ...overrides
+    })
+
+    const suppressionData = [
+      { Date: '10/5/2025', 'COVID-19': '43.6' },
+      { Date: '10/12/2025', 'COVID-19': 'Suppressed' },
+      { Date: '10/19/2025', 'COVID-19': '42.6' }
+    ]
+
+    it('propagates the suppression weight onto the generated segment', () => {
+      const segments = createDataSegments({
+        data: suppressionData,
+        seriesKey: 'COVID-19',
+        preliminaryData: [makeSuppression({ weight: 5 })],
+        colorScale: mockColorScale
+      })
+
+      const suppressedSegments = segments.filter(segment => segment.style)
+      expect(suppressedSegments.length).toBeGreaterThan(0)
+      expect(suppressedSegments.every(segment => segment.weight === 5)).toBe(true)
+    })
+
+    it('leaves the segment weight undefined when no custom weight is set', () => {
+      const segments = createDataSegments({
+        data: suppressionData,
+        seriesKey: 'COVID-19',
+        preliminaryData: [makeSuppression()],
+        colorScale: mockColorScale
+      })
+
+      const suppressedSegments = segments.filter(segment => segment.style)
+      expect(suppressedSegments.length).toBeGreaterThan(0)
+      expect(suppressedSegments.every(segment => segment.weight === undefined)).toBe(true)
     })
   })
 })

package/src/components/LineChart/helpers.ts

@@ -2,6 +2,9 @@ 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[] => {
   const {
     preliminaryData,
@@ -42,24 +45,29 @@ export const createStyles = (props: StyleProps): Style[] => {
     validPreliminaryData.find(pd => isEffectLine(pd, point))
 
   const styles: Style[] = []
-  const createStyle = (lineStyle): Style => ({
-    stroke: stroke,
-    strokeWidth: strokeWidth,
-    strokeDasharray: lineStyle
-  })
+  const createStyle = (lineStyle, customWeight?: number | string): Style => {
+    const parsedWeight = Number(customWeight)
+    const hasValidWeight =
+      customWeight !== '' && customWeight != null && Number.isFinite(parsedWeight) && parsedWeight >= 1
+    return {
+      stroke: stroke,
+      strokeWidth: hasValidWeight ? parsedWeight : strokeWidth,
+      strokeDasharray: lineStyle
+    }
+  }
 
   data.forEach((d, index) => {
     const matchingPd: PreliminaryDataItem = getMatchingPd(d)
 
     let style: Style = matchingPd
-      ? createStyle(handleLineType(matchingPd.style))
+      ? 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) {
-      styles[index - 1] = createStyle(handleLineType(matchingPd.style))
+      styles[index - 1] = createStyle(handleLineType(matchingPd.style), matchingPd.weight)
     }
   })
   return styles as Style[]
@@ -96,7 +104,7 @@ export const filterCircles = (
       if (
         item[fc.column] === fc.value &&
         fc.seriesKeys.includes(seriesKey) &&
-        item[valueKey] &&
+        isCalculable(item[valueKey]) &&
         fc.style === 'Open Circles'
       ) {
         const result = {
@@ -109,7 +117,7 @@ export const filterCircles = (
       if (
         (!fc.value || item[fc.column] === fc.value) &&
         fc.seriesKeys.includes(seriesKey) &&
-        item[valueKey] &&
+        isCalculable(item[valueKey]) &&
         fc.style === 'Filled Circles'
       ) {
         const result = {
@@ -125,7 +133,6 @@ export const filterCircles = (
   return filteredData
 }
 
-const isCalculable = value => !isNaN(parseFloat(value)) && isFinite(value)
 const handleFirstIndex = ({
   data,
   seriesKey,
@@ -139,7 +146,8 @@ const handleFirstIndex = ({
   const result = {
     data: { '0': [] },
     style: '',
-    color: ''
+    color: '',
+    weight: undefined
   }
 
   // If data is empty, return the empty result
@@ -160,6 +168,7 @@ const handleFirstIndex = ({
 
     result.data[pairCount].push(modifiedItem)
     result.style = suppressionData.style
+    result.weight = suppressionData.weight
     result.color = dynamicCategory && modifiedItem ? colorScale(modifiedItem[dynamicCategory]) : ''
 
     // Find the next calculable item index
@@ -190,7 +199,8 @@ const handleLastIndex = ({
   const result = {
     data: { '0': [] },
     style: '',
-    color: ''
+    color: '',
+    weight: undefined
   }
   const lastIndexDataItem = data[data.length - 1]
 
@@ -213,6 +223,7 @@ const handleLastIndex = ({
         lastAddedIndex = prevIndex
       }
       result.style = pd.style
+      result.weight = pd.weight
       result.color = colorScale(modifiedItem[dynamicCategory])
     }
   })
@@ -232,7 +243,8 @@ const handleMiddleIndices = ({
   let result = {
     data: {},
     style: '',
-    color: 'red'
+    color: 'red',
+    weight: undefined
   }
 
   //skip processing if data or preliminaryData is not an array
@@ -270,6 +282,7 @@ const handleMiddleIndices = ({
         // Only add siblings to results if both siblings are found
         if (siblingBefore && siblingAfter) {
           result.style = pd.style
+          result.weight = pd.weight
           result.color = colorScale(item[dynamicCategory])
           result.data[pairCount++] = [siblingBefore, siblingAfter]
         }

package/src/components/LineChart/index.tsx

@@ -18,6 +18,7 @@ import { filterCircles, createStyles, createDataSegments } from './helpers'
 import { getLabelPositionForDataPoint } from './helpers/labelPositioning'
 import LineChartCircle from './components/LineChart.Circle'
 import LineChartBumpCircle from './components/LineChart.BumpCircle'
+import { getYAxisDomainData } from '../../helpers/getYAxisDomainData'
 import isNumber from '@cdc/core/helpers/isNumber'
 
 // Types
@@ -39,9 +40,25 @@ const LineChart = (props: LineChartProps) => {
     yAxisWidth,
     } = props
 
-  // prettier-ignore
-  const { colorScale, config, formatNumber, handleLineType, parseDate, seriesHighlight, tableData, transformedData:data, updateConfig,   } = useContext<ChartContext>(ConfigContext)
-  const { yScaleRight } = useRightAxis({ config, yMax, data, updateConfig })
+  const {
+    colorScale,
+    config,
+    formatNumber,
+    handleLineType,
+    parseDate,
+    seriesHighlight,
+    tableData,
+    transformedData: data,
+    updateConfig,
+    yAxisDomainData
+  } = useContext<ChartContext>(ConfigContext)
+  const dataForRightAxis = getYAxisDomainData({
+    config,
+    data,
+    tableData,
+    fullEligibleDomainData: yAxisDomainData
+  })
+  const { yScaleRight } = useRightAxis({ config, yMax, data: dataForRightAxis, updateConfig })
   const showSingleSeries = config.tooltips.singleSeries
   if (!handleTooltipMouseOver) return
 
@@ -302,7 +319,7 @@ const LineChart = (props: LineChartProps) => {
                               ? segment.color
                               : colorScale(config.runtime.seriesLabels[seriesKey])
                           }
-                          strokeWidth={seriesData[0]?.weight || 2}
+                          strokeWidth={Number(segment.weight) || seriesData.weight || 2}
                           strokeOpacity={1}
                           shapeRendering='geometricPrecision'
                           strokeDasharray={handleLineType(segment.style)}