Radar: indicator names can go beyond canvas (thus clipped)

[qortex]

Version

4.9.0

Reproduction link

https://codepen.io/qortex/pen/qBNyxyv

Steps to reproduce

Put too large names for indicators. They spill out of the canvas.

What is expected?

Text should be visible: canvas should contain the text (or wrap it?)

What is actually happening?

Text spill out of the canvas.

---

Workaround is to word wrap the labels by hand (insert \n in the text) and take a safety margin by reducing the radar radius. But there is no guarantee the margin is high enough (or too high and waste space).

[echarts-bot[bot]]

Hi! We've received your issue and please be patient to get responded. 🎉 The average response time is expected to be within one day for weekdays.

In the meanwhile, please make sure that you have posted enough image to demo your request. You may also check out the API and chart option to get the answer.

If you don't get helped for a long time (over a week) or have an urgent question to ask, you may also send an email to dev@echarts.apache.org. Please attach the issue link if it's a technical question.

If you are interested in the project, you may also subscribe our mailing list.

Have a nice day! 🍵

[pissang]

In the coming 5.0 text can be set width and a newline will be applied if text is overflow.

[qortex]

Great thanks!

Do you think there's a way to make this automatic in the sizing algorithm? Because figure size is usually set through percentages. Mixing in Pixels might not be optimal and still lead to issues when in a responsive setting. What do you think?

[yassilah]

In the coming 5.0 text can be set width and a newline will be applied if text is overflow.

Unfortunately, it seems that the width property still isn't supported in v5. The online demo isn't either: https://echarts.apache.org/next/en/option.html#radar.name.width.

[kalyanvedurumudi]

https://echarts.apache.org/en/option.html#radar.axisName.width

Even with the width property and adding overflow as truncate, we are not able to see ellipsis for the indicator names. Any update on this?

[michaelrampl]

Facing the same issue on 5.2.2 and 5.3.2

axisName: {
    overflow: "breakAll",
    width: 25,
    textBorderType: "solid",
    borderWidth: 1,
    borderColor: "#000000"
}

This clearly shows that only 1 line is being drawn.

[gagarine]

Reproduction with the 5.x version https://codepen.io/gagarine/pen/mdLpEOj

Not only the label does not truncate, but also the radar size is not adapted to the container.

[MichealF26]

Any update on this?

[MichealF26]

The workaround I'm currently using is to escape a newline character within the indicator text like this

option = {
  title: {
    text: 'Basic Radar Chart'
  },
  legend: {
    data: ['ACME Corp']
  },
  radar: {
    indicator: [
      { name: 'Data Mining and Statistical Analysis', max: 5 },
      { name: "Data visualisation, \nstorytelling with \ndata and presentation", max: 5 },
      { name: 'Business Intelligence and Strategy', max: 5 },
      { name: 'Database Management and Architecture', max: 5 },
      { name: 'Cloud and distributed computing', max: 5 },
      { name: 'Machine learning / Cognitive computing', max: 5 },
    ]
  },
  series: [
    {
      name: 'Expertise',
      type: 'radar',
      data: [
        {
          value: [4, 5, 2, 5, 3, 2],
          name: 'ACME Corp'
        }
      ]
    }
  ]
};

Please take note that you have to escape with double quotes as single quotes will not escape the newline character

[gagarine]

@DoctorDerek posted on another workaround in #16391 (duplicate) that reduce the raduis.

// ...
  radar: {
    shape: 'polygon',
    indicator, // the data labels as an array
    center: ['50%', '50%'],
    radius: '50%',
  },
// ...

[github-actions[bot]]

This issue has been automatically marked as stale because it did not have recent activity. It will be closed in 7 days if no further activity occurs. If you wish not to mark it as stale, please leave a comment in this issue.

[github-actions[bot]]

This issue has been automatically closed because it did not have recent activity. If this remains to be a problem with the latest version of Apache ECharts, please open a new issue and link this to it. Thanks!