'Recharts - Draw a trend line on top of a barchart

Hi I am creating a barchart using the Recharts library. I am wanting to draw a trend line on top of the barchart like so: enter image description here

I am using the following to draw the barchart:

       <BarChart data={transformedDataByCategory}>
            <CartesianGrid strokeDasharray="3 3" vertical={false} />
            <XAxis
              dataKey="category"
              interval={0}
              tickLine={false}
              tick={(e) => {
                const { payload: { value } } = e;
                e.fill = theme.colors.onfCategory[value].base;
                e.fontSize = '11px';
                e.fontWeight = 'bold';
                return <ChartText {...e}>{value}</ChartText>;
              }}
            />
            <YAxis />
            <Legend />
            <Tooltip cursor={{ fill: '#f1f1f1' }} />

            {years.map((year, i) => <>
              <Bar key={`year_${i}`} dataKey={year} fill={yearColours[i]}/>
            </>)}
       </BarChart>

I have tried using the ReferenceLine component to draw on top of the graph but have had no luck. Any help would be great thanks!



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source