Legend is not displayed when name repeats

[Mykhaylo12]

Version

5.4.0

Link to Minimal Reproduction

https://codepen.io/Mykhailo-codepen/pen/rNrPbeV

Steps to Reproduce

1)create pie chart with legend 2)add data to legend with elements which has same name.

Current Behavior

If name of legend repeats it will be omitted and only first will be shown

Expected Behavior

All names of legend are displeyed even they repeats

Environment

Problem in all browsers independent of Framework

Any additional comments?

[helgasoft]

how about a little cheat ?

[Mykhaylo12]

Thank you! This workaround I will use like last option because:

1. it add spaces to legend and it will be not symmetrical
2. amount of names are dynamic (can be more than 10) and I need to create additional method which handle all this workaround

[helgasoft]

...or rethink the data structure. Legend is used for series and categories, not for values.

On Sat, Feb 4, 2023, 23:48 Mykhaylo12 @.***> wrote:

Thank you! This workaround I will use like last option because:

1. it add spaces to legend and it will be not symmetrical
2. amount of names are dynamic (can be more than 10) and I need to create additional method which handle all this workaround

— Reply to this email directly, view it on GitHub https://github.com/apache/echarts/issues/18242#issuecomment-1417041921, or unsubscribe https://github.com/notifications/unsubscribe-auth/ADDPD573JZ5M7WQRJ33PCQLWV5LOXANCNFSM6AAAAAAURHCU3I . You are receiving this because you commented.Message ID: @.***>

[helgasoft]

how about this way, with a dataset

[Mykhaylo12]

I have requirements. I don't decide by myself

[ptulou]

I have a similar case. In my case I've got many series on a chart. Some of the series are named line plots. Some of them show the results of analytics on the data using mark areas, and such. We want to be able to toggle the analytics on and off separately from the data through the legend. But, if the user happens to name the data trend the same thing as the analyitic, we get this behavior where the two are treated as one thing. It would be great if we could supply an id value to the legend data so that the id could be used for uniqueness and the name could just be for display. Ideally, that id value could be the id of the series so that we're linking the two on something more concrete than the user modifyiable name?

[abbasgalen]

Agree, this is very helpful to have ability to repeat names in the series. having an id in the legend that links upto the id of the series would be great.

[PIMBA]

any news?

[vandelpavel]

I have a similar issue, in my case I've created a chart used to compare data in time. The series names are the same "measureName+deviceName" but in the end they are 2 different series. The only thing that makes them differ is the actual range in which they are visualized but placing that range into that name makes the label too long. I would like to keep the 2 legend items with the same name but different color so the final user can decide to show/hide what he doesn't want to see in that moment:

[helgasoft]

keep the 2 legend items with the same name but different color

@vandelpavel - something like that ? Add a space char.

[vandelpavel]

Nice workaround but I'm developing an app that must render dynamic charts with dynamic data. I don't know how many series/yaxis/xaxis there will be at the end.

I'm currently patching this issue using a suffix ex: 01/01-01/31 This workaround makes names unique BUT it eats a lot of horizontal space on labels (also on tooltip)

[helgasoft]

it eats a lot of horizontal space on labels

using legend.type:'scroll' would help

[vandelpavel]

My previous screenshot only had 2 series. I'm already using the type "scroll" for legend. This helps but it still is just a workaround. We also have that same issue on tooltips:

In order to patch this too we could use the tooltip formater. It feels tacky but allows you to reach the wanted result.

Another issue with my specific workaround: If you need to add a suffix for time intervals then consider adding the year because if you select the same month of 2 different years then the system will break.

[minhnhat44]

Thank you! This workaround I will use like last option because:

1. it add spaces to legend and it will be not symmetrical
2. amount of names are dynamic (can be more than 10) and I need to create additional method which handle all this workaround

@Mykhaylo12 : Have a better workaround using legend's formatter. Adding suffix for name, then using formatter to cut the suffix by delimiter

  legend: {
    formatter: function (name) {
        return name.split('-')[0];
    }
  },
  tooltip: {},
  dataset: {},
  xAxis: { type: 'category' },
  yAxis: {
    name: 'Test label',
    nameLocation: 'middle',
    nameGap: 100
  },
  series: [{ type: 'bar',
    name: "Apple-id1",
    data: [1,2,3,4,5,6,7,8,9,10,11,12]
  },
  { type: 'bar',
    name: "Apple-id2",
    data: [1,2,3,4,5,6,7,8,9,10,11,12]
  },
  ]
};

[vandelpavel]

@minhnhat44 Be careful with your suggestion. If the user/db uses a "dashed-name" it will break your logic, ex:

const name='dashed-name-id1';
const nameWithoutId=name.split('-')[0]; // => "dashed"

If you want to use your workaround rather use something like this:

const name='dashed-name-id1';
const segments=name.split('-'); // => ['dashed', 'name', 'id1']

const id=segments.slice(-1); // => "id1"
const nameWithoutId=segments.slice(0,-1).join('-'); // => "dashed-name"

[selunders]

I ran into the same issue, ended up appending zero-width spaces (\u200B)

const mySeries = myData.map((data, index) => ({
  name: `${data.name}${'\u200B'.repeat(index)}`,
  ... // rest of series info
})

If you wanted to be extra careful to prevent duplicates:

  name: `${data.name.replace(/\u200B/g, "")}${`\u200B`.repeat(index)}

Modifying @helgasoft 's example from earlier: