zIndex with referenceLine is not working

[nrcaz]

Hello,

I m enjoy the library but i have some trouble handling the focused label component, as you can see in the image above, the reference line are above it

Adding zIndex in referenceLine1Config does not seems to do anything
Adding position 'absolute' and zIndex on the focused label component, does not do anything either

          referenceLine1Config={{
            color: theme.neutralColor300,
            zIndex: -10000,
          }}
          referenceLine2Config={{
            color: theme.neutralColor300,
            zIndex: -10000,
          }}
          referenceLine3Config={{
            color: theme.neutralColor300,
            zIndex: -10000,
          }}

You can also see that the reference line are above the traced blue line

Any idea what is wrong on my side ?

Here is the entire code for the component

        <LineChart
          data={data}
          yAxisOffset={Ymin}
          height={260}
          overflowTop={1}
          stepValue={stepValue}
          noOfSections={4}
          hideRules
          color={chartColor}
          dataPointsColor={chartColor}
          focusedDataPointColor={theme.primaryColor}
          curved
          adjustToWidth
          isAnimated
          animateOnDataChange
          formatYLabel={(value) => {
            if (value === String(Ymax) || value === String(Ymin)) {
              return ""
            }
            return value
          }}
          thickness={2}
          textColor1={theme.primaryColor}
          yAxisThickness={0}
          xAxisThickness={0}
          showTextOnFocus
          showStripOnFocus
          stripColor={theme.neutralColor600}
          stripWidth={1}
          stripHeight={190}
          scrollToEnd
          dataPointLabelShiftY={-65}
          dataPointLabelShiftX={-11}
          dataPointsRadius={4.5}
          focusEnabled
          spacing={(screenWidth - 50) / bestPrByMonth.length}
          xAxisLabelTextStyle={{ color: theme.neutralColor600 }}
          yAxisIndicesColor={theme.primaryColor}
          yAxisTextStyle={{ color: theme.neutralColor600 }}
          referenceLine1Position={firstReferenceLinePosition}
          referenceLine2Position={secondReferenceLinePosition}
          referenceLine3Position={thirdReferenceLinePosition}
          referenceLine1Config={{
            color: theme.neutralColor300,
            zIndex: -10000,
          }}
          referenceLine2Config={{
            color: theme.neutralColor300,
            zIndex: -10000,
          }}
          referenceLine3Config={{
            color: theme.neutralColor300,
            zIndex: -10000,
          }}
          zIndex1={-10000}
          zIndex2={-10000}
          zIndex3={-10000}
          showReferenceLine1
          showReferenceLine2
          showReferenceLine3
          yAxisSide={yAxisSides.RIGHT}
        />

[Abhinandan-Kushwaha]

Hi @nrcaz 👋
Thanks for reporting this issue.

You can use the prop referenceLinesOverChartContent = {false} to fix this issue.
For Line and area charts, it is available from versions 1.4.27 onwards. For Bar charts it was already there.

Please use the latest version of the library.

[nrcaz]

Thanks you for the help !