Flexchart legends are cutoff

Flexchart legends are cutoff

Posted by: sskss1ss2 on 13 November 2022, 7:38 pm EST

• 

  sskss1ss2

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 13 November 2022, 7:38 pm EST

  The charts(flexchart/piechart) are loaded with a large data set.
  
  Henceforth there is a huge number of legends.
  
  But the legends are cut off and are not able to see all the legends.

  It is not being possible to add scroll to the legends because the legends are using clip-path.

• 

  vivek.pannu

  

  • Post Options:
  • Link
    Copy

  Posted 14 November 2022, 8:50 pm EST

  Hi,

  You’ll have to manipulate the DOM elements to avoid this issue, as this is not a common scenario. You can hide the default legends and handle the flexChart’s ‘rendered’ event to create and add custom legends to the DOM. You can use a Listbox to show the custom legends list.

  Please refer to the following sample for it’s full implementation https://stackblitz.com/edit/js-cyohjt?file=index.js

  Regards

• 

  sskss1ss2

  • Post Options:
  • Link
    Copy

  Posted 17 November 2022, 7:53 pm EST

  Hi,

  Thank you for the solution.
  
  But the tooltip seems off with this solution. If you observe carefully the tooltip of the last bar is actually appearing for the 4th bar which is wrong.
  
  How to manipulate tooltip here?

  Thanks,

• 

  vivek.pannu

  

  • Post Options:
  • Link
    Copy

  Posted 20 November 2022, 9:25 pm EST

  Hello,

  The error can be removed by setting the listBox’s position to ‘absolute’. I have updated the solution with the same. Please refer to the following updated sample - https://stackblitz.com/edit/js-cyohjt?file=style.css
  
  Refer to style.css file to observe changes.

  Regards