Forums Ignite UI for jQuery
Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
Close
Abu Sufyan
270
Chart tool tip position in cross browser
posted

Hi,

We customize chart tooltip formatting everything working fine in Internet Explorer and Google Chrome but not working perfectly in Mozilla Firefox.

Issues details

  • If you open attached sample application in IE and chrome tooltip working fine next to the point hover in chart area, but in Mozilla Firefox tooltip is always in upper left corner with following issues date format and volume commas are disturbed, can you fix those, so our chart is compatible in all browsers ?

                [Firefox] Format price and volume like this

                      o   Date format:  10/29/15

                      o   All prices should be fixed at 2 decimal places

                      o   Volume should use commas

  • Tooltip prices (open, high, low, close) is not properly fixed at 2 decimal places, Zero (0) is not appeared after decimals like we have High value in chart collection is '47.6000' but display in tooltip like this '47.6' zero (0) is not displayed. How to fix that ?
  • Currently tooltip background is white semi-transparent color, when we set grey background its transparency is go away. How to set semi-transparent grey background (#F7F7F7) of tooltip with sky blue border color ? 

Regards,

Sufyan

Chart.zip
Parents
No Data
Reply
  • 8421
    posted

    Hello Sufyan,

    I'm currently looking in to the first issue with Firefox to determine what is going on with the positioning of the tooltip.

    As for the second issue it is important to note that the tooltips use the data as it is in the data source. To have the tooltip render with your formatting you'll need to override the value like you are doing with the date and the volume.

    As for the appearance, the best approach would be to create a tooltipTemplate and then specify the exact CSS styling you want applied. You could set the color to whatever value you want and then control transparency through the use of the opacity CSS setting. Or, if you prefer you can use a background-color as an rgba value that would give you a similar effect.

    I will keep looking in to the Firefox issue and will have another update for you by the end of the business day tomorrow. If you have any questions or concerns for me in the meantime please let me know.

Children