Bar chart values overlap bar becoming unreadable

I have a bar chart driven by a recordType which displays the value of each bar.  What happens is that these values are being placed on top of the bar for the longest bars.

I'm surprised that Appian does not automatically adjust the color when it overlaps the text onto the bar.  How do we get the text readable both overlapped and not overlapped?

One easy answer is to use a lighter bar color.... However, I am required to meet WCAG AA color contrast between the white background and the bars.  This means the bars have to be a dark color.

I have found that I can adjust the Y-axis maximum value to force the bars to be shorter which keeps the labels to the right of the bar.

The challenge with this solution is that the range of possible values is theoretically infinite (practically within about 10-ish years).  The only way to know what the current max value would be to query the recordType ahead of time, add some buffer value to it, set the Y max to that value.  But we don't know if this will create any performance issues (recordType is synced but we have small data set in development, production data set will grow over time).

Any thoughts on handling this?

Thank you,.

  Discussion posts and replies are publicly visible

Parents Reply
  • Multiple problems with this work-around.

    1) Our entire UI is based on white background.  Implementing this would require use to rework all other screens

    2) The bar chart still does not meet WCAG AA because the contrast ratio between the blue bar and the white text is 4:09:1.  We need to meet 4.5:1 contrast ratio.

    3) The area chart does meet the contrast requirement between the area color and the data label color (8.91:1).  However, the contrast between the area (dark blue) and the background (black) is inadequate (2.35:1 contrast).

    Yeah.... meeting WCAG is hard at times.

Children
  • 0
    Certified Senior Developer
    in reply to stevenh6272

    Hello Steven,
    you can do a lot with appian UI, but its not the ultimative custom your own CSS/HTML totally free design fit.
    We, as Designer/devs, need to be aware of this and be careful not to oversell appian and its capbilities on the UI front.
    So this i sadly a common limitation you will face with appian.
    UI style guides, pixel perfect implementation etc. 
    Good luck solving it.
    Perhaps creating a plugin might help?