Keeping DataTips in Charts boundaries

Here goes a little trick I used for an application some time ago. The problem was that data tips that are displayed on mouse overing Flex Charts, fly over the Application content, and in some cases do not respect the visible boundaries of it. This effect can be undesired, and a usability problem because can make the information impossible to read in some situations.

The attached application shows the problem in action.

If you hover the first pair of charts, you'll see the custom created data tip appearing at the right of the central point of the sector being pointed. For the pie on the right, the information is unreadable. The second set of charts, use another data tip renderer implementation that keeps the data tip in the pie boundaries, making the information always visible.




Get the source code here.



It's so simple, just take care when displaying the data tip in the default position that it fits into its owner chart, and if it's not possible, adjust its position. Hope it helps! And if you find a better way to solve the problem... or see anything that could be improved, please write! ;-)