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
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions