Skip to content

Why is the use of Legend restricted? #144

@lahann

Description

@lahann

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.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions