Recharts - bar chart dynamic label position

Question

How can I have dynamic label positions of Bars like is showing in the picture?

Here is my code till now

const data = [
        { currency: 'CHF', amount: 3, amountLabel: 3023.00 },
        { currency: 'GBP', amount: 6, amountLabel: 6275.00 },
        { currency: 'USD', amount: 10, amountLabel: 9999.00 },
        { currency: 'EUR', amount: 14, amountLabel: 14819.00 },
        { currency: 'LEK', amount: 24, amountLabel: 24023000.00 },
    ];    
<BarChart
    width={430}
    height={170}
    data={data}
    layout="vertical">
    <XAxis type="number" orientation="top" stroke="#285A64" />
    <YAxis type="category" dataKey="currency" axisLine={false} dx={-5} tickLine={false} 
           style={{ fill: "#285A64" }} />
     <Bar background dataKey="amount" fill="#285A64" barSize={{ height: 26 }}>
        <LabelList dataKey="amountLabel" position="insideRight" style={{ fill: "white" }} />
     </Bar>
</BarChart>

Find Sample code here jsfiddle

As you said this example is having a dynamic label positioning. That is true. What do you need? — Dushan Ranasinghage, Apr 24 '20 at 08:39
As you can see in the image the position of the label is dynamic. Some bars have it `position: "right", color :"black"` and the last one has `position:"insideRight", color:"white"` — user08, Apr 24 '20 at 08:55
Yeah.I see last bar label is inside the bar because of it's css. and the other have label outer the bar. — Dushan Ranasinghage, Apr 24 '20 at 08:59
I haven't been able to achieve that. Please see the code example. What am I missing? — user08, Apr 24 '20 at 09:13
I replaced you code samples with the original code and there were nothing wrong in your code sample. I have a feeling about there is something wrong with the versions you are using or there can be overridden CSS for the bar. Are you using rechart in another page of your app? — Dushan Ranasinghage, Apr 24 '20 at 09:20

score 9 · Accepted Answer · answered Oct 08 '20 at 14:13

You should implement a React component to be injected into the prop content (LabelList)

For example (JSFiddle):

const {BarChart, Bar, XAxis, YAxis, LabelList} = Recharts;
 const data = [
        { currency: 'CHF', amount: 3, amountLabel: 3023.00 },
        { currency: 'GBP', amount: 6, amountLabel: 6275.00 },
        { currency: 'USD', amount: 10, amountLabel: 9999.00 },
        { currency: 'EUR', amount: 14, amountLabel: 14819.00 },
        { currency: 'LEK', amount: 26, amountLabel: 26023000.00 },
    ];
    
const renderCustomizedLabel = (props) => {
  const {
    x, y, width, height, value,
  } = props;

const fireOffset = value.toString().length < 5;
const offset = fireOffset ? -40 : 5;
  return (
      <text x={x + width -offset} y={y + height - 5} fill={fireOffset ? "#285A64" :"#fff"} textAnchor="end">
        {value}
      </text>
  );
};

const VerticalBarChart = React.createClass({
    render () {
    return (
        <BarChart
                width={400}
                height={170}
                data={data}
                layout="vertical">
                <XAxis type="number" orientation="top" stroke="#285A64"/>
                <YAxis type="category" dataKey="currency" axisLine={false} dx={-10} tickLine={false} style={{ fill: "#285A64" }} />
                <Bar background dataKey="amount" fill="#285A64" barSize={{ height: 26 }}>
                    <LabelList dataKey="amountLabel" content={renderCustomizedLabel} position="insideRight" style={{ fill: "white" }} />
                </Bar>
            </BarChart>
    );
  }
})

ReactDOM.render(
  <VerticalBarChart />,
  document.getElementById('container')
);

Commenting to say that this was a really helpful post and I used this solution! Thank you for sharing! — Anthony, Nov 17 '22 at 21:59

Recharts - bar chart dynamic label position

1 Answers1