Make a custom Y-axis line for specific value?

[lucksp]

In victory-native: ^41.6.1 I have a BarChart. One requirement is that at a certain Y-value, such as 1000, it should look different from the other values.

• How can I make a custom line for this particular value?

• How can I make a custom point on the grid to indicate a "star" at 1000?

The finished product should look like:

This is what I have so far:

export const SummaryBarChart = ({ data, threshold }: Props) => {
  const font = useFont(brand.fontMedium, 12);

  return (
    <CartesianChart
      xKey={'type'}
      yKeys={['count']}
      data={data}
      padding={{
        left: 0,
        right: 0,
        bottom: 5,
        top: 15,
      }}
      domain={{ y: [0, threshold], x: [0] }}
      domainPadding={{
        left: Dimensions.get('screen').width / 8,
        right: Dimensions.get('screen').width / 8,
        top: 10,
      }}
      axisOptions={{
        font,
        tickCount: {
          y: threshold / 100,
          x: 0,
        },
        labelPosition: 'outset',
        lineColor: '#d4d4d8',
        labelColor: '#d4d4d8',
      }}
      xAxis={{
        font,
        labelColor: '#dcdcdc',
        lineColor: 'transparent',
        formatXLabel: (label) => {
          return label !== undefined
            ? label.charAt(0).toUpperCase() + label.slice(1)
            : '';
        },
      }}
    >
      {({ points, chartBounds }) => {
        return points.count.map((point, i) => {
          const gradient =
            i === 0 ? ['#f472b6', '#be185d90'] : ['#a5f3fc', '#0891b290'];

          return (
            <Bar
              key={i}
              animate={{ type: 'spring' }}
              points={points.count}
              barCount={points.count.length}
              barWidth={Dimensions.get('screen').width / 20}
              chartBounds={chartBounds}
              roundedCorners={{
                topLeft: 8,
                topRight: 8,
              }}
            >
              <Text font={font} text={point.xValue.toString()} />
              <LinearGradient
                start={vec(0, 0)}
                end={vec(0, 750)}
                colors={gradient}
              />
            </Bar>
          );
        });
      }}
    </CartesianChart>
  );
};

I have tried rendering an SVG line, but this fails.