CODEWITHSUNDEEP
reactjsrecharts
Wt.N
Wt.N

Reputation: 1658

Recharts stacked barchart order and legend are inconsistent

I'm making a figure with ReCharts in ReactJS. In stacked bar chart, legend order is not consistent with vertical bar chart. Bar chart order should be from the top to the bottom to be consistent with legend. Does anyone know a workaround to fix it? I have tried to change order of Legend by adding className to <Legend />, but it didn't work. className isn't general props? It has ul and li, so I am happy if I can change ul and li's style to reverse order.

stacked barchart screenshot

Upvotes: 1

Views: 3091

Answers (1)

Taha LAGHZALI
Taha LAGHZALI

Reputation: 534

In this case you can render a custom legend with a you're custom structure (html and css) and based on payload value using the prop content, here is the documentation :

https://recharts.org/en-US/api/Legend#content

Here is an adaptation of your code, it needs just some enhancement in term of css:

http://jsfiddle.net/tahalz/9427x1m8/

const renderLegend = (props) => {
  const { payload } = props;
  console.log(payload)
  return (
    <div>
      {
        payload.reverse().map((entry, index) => (
          <span key={`item-${index}`}><div style={{display:'inline-block',width:'12px',height:'12px',backgroundColor:entry.color}}></div>{entry.value}</span>
        ))
      }
    </div>
  );
}

...

<Legend content={renderLegend}/>

Upvotes: 3

Related Questions