Suggest text trimming for the axis labels

Posted by: Yifan_Zhang on 2 July 2018, 10:32 am EST

    • Post Options:
    • Link

    Posted 2 July 2018, 10:32 am EST

    Dear Wijmo team,

    We found that chart is sometimes badly positioned/laid out. See this demo: http://jsfiddle.net/0q78n1ya/41/. We do have some realistic cases that issue happens and it just looks bad.

    It would be really nice if we can have a property of labelLength in the Axis class such that after that certain length, the text will be trimmed with ellipsis “…”. Also if mouse hover over the trimmed text, a tooltip can popup and shows the full text would be a plus. Can you help me with this request? Thanks.

  • Posted 2 July 2018, 10:35 pm EST

    Hi,

    Thank you for your valuable feedback and feature request.

    We have forwarded this request to the concerned team for review with internal tracking id 331356. This may be included in the future releases if it is found feasible.

    ~Manish

  • Posted 19 July 2018, 5:13 am EST

    Hi, just a follow up on the progress for this issue. It should be pretty straight forward, right?

  • Posted 19 July 2018, 11:24 pm EST

    Hi,

    We are sorry indeed. This issue is still with the dev team. We have asked for an update.

    We will let you know as we get an update on this.

    ~Manish

  • Posted 14 August 2018, 8:48 am EST

    Any updates? Thanks.

  • Posted 15 August 2018, 10:22 pm EST

    Hi,

    The issue is still with the dev team. We will let you know for any updates.

    Sorry for the inconvenience caused.

    ~Sharad

  • Posted 20 February 2019, 11:01 am EST

    Are there any updates regarding this feature since last Aug? It should be a simple and critical enhancement of the chart.

  • Posted 21 February 2019, 4:15 am EST

    Hi,

    The issue is still with the dev team. We are sorry but we are unable to provide an ETA for the case. However, we have prepared a sample for you to work around it until this feature is added.

    Please refer to the following sample demonstrating the same:

    https://stackblitz.com/edit/js-nergpv?file=index.html

  • Posted 25 February 2019, 12:08 pm EST

    Thanks for the sample solution. The tooltip works great, however, the formatter does not resize with the whole chart. See the demo here: https://stackblitz.com/edit/js-kogtjh?file=index.js

    The trimmed string length set to 10 instead of 5, then the long labels all get cut off. It seems the whole chart layout was not impacted by the axis label formatter. I know we can set the plotMargin manually, is there a way of having the plotMargin adjusted automatically based on the formatter? Also how can I retrieve the default plotMargin? Can you help me with that?

  • Posted 25 February 2019, 12:54 pm EST

    Also I found that manually change the plotMargin will not render the axis title anymore as it will be cut off.

  • Posted 25 February 2019, 5:05 pm EST

    is there a way of having the plotMargin adjusted automatically based on the formatter?

    We could handle the rendered event and set the plot margins dynamically according to the content.

    Also how can I retrieve the default plotMargin?

    To retrieve the default margins we need to get client rect of chart svg Elemenet and chart’s plot area and then get the difference between the two. Please refer to the following code snippet:

    chart.rendered.addHandler(function(s,e){
      let chartSvgRect = chart.hostElement.querySelector('svg').getBoundingClientRect();
      let plotAreaRect = chart.hostElement.querySelector('.wj-plot-area').getBoundingClientRect();
      // rendered margins/ default margins
      let left = plotAreaRect.left - chartSvgRect.left,
          right = chartSvgRect.right - plotAreaRect.right,
          top = plotAreaRect.top - chartSvgRect.top,
          bottom = chartSvgRect.bottom - plotAreaRect.bottom;
    }
    

    Also I found that manually change the plotMargin will not render the axis title anymore as it will be cut off.

    We could also reposition the title in the rendered event.

    Please refer to the following updated sample and let us know if you face any further issues:

    https://stackblitz.com/edit/js-4a6g43?file=index.js

  • Posted 26 February 2019, 5:02 am EST

    Thank you for your detailed answer. That really helps. I’ll go with this workaround and hopefully, this feature can be fully integrated into wijmo soon.

Need extra support?

Upgrade your support plan and get personal unlimited phone support with our customer engagement team

Learn More

Forum Channels