recharts: Stacked chart legend has the wrong order

It seems like stack charts legends get generated with the wrong order. Assuming you have:

        <BarChart width={600} height={300} data={data}
            margin={{top: 20, right: 30, left: 20, bottom: 5}}>
       <Bar dataKey="pv" stackId="a" fill="#8884d8" />
       <Bar dataKey="uv" stackId="a" fill="#82ca9d" />
      </BarChart>

Bar uv will appear on top, and pv on bottom (see http://recharts.org/examples/#StackedBarChart).

The problem is that the legend has pv first, and uv second. Which is confusing especially if you chose to use a vertical layout.

About this issue

Original URL
State: open
Created 8 years ago
Reactions: 8
Comments: 25 (12 by maintainers)

Most upvoted comments

@xile611 I am still seeing this inverted behavior in my horizontal chart:

The code used to generate this graph is as follows:

<BarChart layout="vertical" width={800} height={300} data={data}
    margin={{top: 20, right: 30, left: 40, bottom: 5}}>
  <XAxis type="number" />
  <YAxis type="category" dataKey="name"/>
  <CartesianGrid strokeDasharray="3 3"/>
  <Tooltip/>
  <Legend />
  <Bar name="Fitness Level 1" dataKey="Level1" stackId="a" fill="#FBB040" />
  <Bar name="Fitness Level 2" dataKey="Level2" stackId="a" fill="#0D79A7" />
  <Bar name="Fitness Level 3" dataKey="Level3" stackId="a" fill="#589241" />
</BarChart>

+14

CIS-gvoit on Jan 10, 2017

This still occurs when the legend layout is vertical. http://jsfiddle.net/gabeybaby/8rm3uq9v/1/

GabeDahl on Apr 7, 2020

problem still exists with 1.8.5

xg1990 on Nov 8, 2020

Is there any way to change an order of stacked bars so that the order matches the legend and tooltip?

a-pachkov on May 25, 2022

By the way, in the meantime I’ll use:

    display: flex;
    flex-direction: column-reverse;

SachaG on Sep 17, 2016

@SachaG I think this’s reasonable. The bars are stacked from the first group to the second group

xile611 on Sep 7, 2016