Flexchart legends are cutoff

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

  • 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.

  • Posted 14 November 2022, 8:50 pm EST


    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


  • Posted 17 November 2022, 7:53 pm EST


    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?


  • Posted 20 November 2022, 9:25 pm EST


    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.


Need extra support?

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

Learn More

Forum Channels