Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Why is the use of Legend restricted? #144

Open
lahann opened this issue Nov 22, 2018 · 0 comments
Open

Why is the use of Legend restricted? #144

lahann opened this issue Nov 22, 2018 · 0 comments

Comments

@lahann
Copy link

lahann commented Nov 22, 2018

Hey there,
first of all thank you for this handy little module!
I'm currently using Bar and Pie Chart. In order to display the respective values I utilized the Legend-Component.

<BarChart //
  axes
  axisLabels={{ y: 'Amount' }}
  yTickNumber={5}
  height={200}
  width={300}
  data={statusData}
/>
<Legend //
  data={statusData} 
  dataId={'y'} 
  config={statusData.map(d => ({ color: d.color }))} 
  horizontal 
/>
<PieChart //
  labels
  size={170}
  styles={{
    '.pie-chart-label': {
      fontSize: '1em',
      fill: '#ffffff'
    }
  }}
  data={haData}
/>
<Legend //
  data={haData} 
  dataId={'value'} 
  config={haData.map(d => ({ color: d.color }))} 
  horizontal 
/>

The Problem is the following code snippet from node_modules\react-easy-chart\modules\legend\index.js

createLegend() {
    const {
      dataId,
      data,
      tags,
      horizontal
    } = this.props;

...

    data.forEach((item) => {
      const index = tags.findIndex((tag) => tag === item[dataId]);
      if (index < 0) tags.push(item[dataId]);
    });

    return (
      <ul className="legend">
        {tags.map((item, index) => {
...

So.. if there are identical values in the item array, they won't be displayed.
In my case it's the value 0.
This results in:
image

I was just wondering why this is so restrictive.
Regards
Tim.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant