Known Issue with Brazos UI Horizontal Bar Chart (Chrome only)

Follow

Problem

The Brazos UI team was recently made aware of an issue with the Horizontal Bar chart. This issue is specific to a particular page layout, so we were unable to find a universal solution. This article will describe the issue and the two suggested work-arounds.

This issue occurs when a horizontal bar chart is placed inside a section with another section immediately to the right. When hovering over a bar in the chart, the tooltip is covered up by the adjacent section as seen here:

Cause

This problem is caused by the way Chrome interprets positioning and z-index values.

Resolving the Problem

There are three recommended work-arounds for this problem:

  1. Move the tooltips to the left by adding this CSS to your coach (or template): Horizontal_Bar_Chart .nvtooltip {
        margin-left:-250px;
    }

  2. Add a class called sectionWithChart to your left-hand section, and add the following CSS to your coach (or template):
    .sectionWithChart {
        z-index: 1;
    }
  3. Redesign your coach so that you don't have a section to the right of your chart.

Please let us know if you have any questions or comments.

Have more questions? Submit a request

Comments

Powered by Zendesk