experience-experiments / react-easy-chart

[DEPRECATED] - Easy to use React Charting library
http://experience-experiments.github.io/react-easy-chart
BSD 3-Clause "New" or "Revised" License
142 stars 55 forks source link

Why is the use of Legend restricted? #144

Open lahann opened 5 years ago

lahann commented 5 years ago

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 _nodemodules\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.