How to show progress bar and percentage value in a compact space?
I need to develop a kind of information dashboard, with a sizable number of widgets like this, to show progress on a bunch of things:
I need to show the percentage value and the percentage complete, which I'm representing here as partial fill, and I need to keep the number within the bar, because I don't have a lot of real estate to show the number anywhere else.
But I'm wondering if this is hard to read when the number falls right over the completion line, as you can see in the Subtraction 7% case.
I've tried various color schemes, as well as positioning the number so that this doesn't happen, but that feels confusing too, when the numbers move around.
Is there a better way to show this kind of information?