Colored progress bars

The code for these examples can be used in the Markdown visualization to create progress bars that are sectioned by color to reinforce the meaning current progress state. The progress bar visualization rounds to the nearest 5% but shows the exact value next to the bars.

Fill to progress level

This style shows the unmet progress levels as unfilled, but with a border color to indicate the meaning of the level.

Setup

This chart has a very simple structure - the current measurement, the target, and the necessary calculations to create the chart. Adjust your calculation as needed for your data, but make sure you use the % formatting on the “progress” column. The following table explains each field used in the example, including the calculation formulas.

Col	Name	Description or formula	Purpose
A	Total Sale Price	Field measuring progress
B	Target (`calc_1`)	Goal or target
C	Progress (`calc_2`)	`=A1 / B1`	% of target to goal - make sure formatted as a %
D	Bars to fill (`calc_3`)	`=ROUND(C1 * 100 / 5, 0)`	Round to the number of bars to fill

Example code

<style>
ol.highlight-progress {
  --progress-padding: 3px;
  --progress-step-width: 12px;
  --progress-step-height: 56px;
  --color-bad-hsl: 343 100% 57.1%;
  --color-meh-hsl: 56 100% 57.1%;
  --color-good-hsl: 97 100% 39.6%;
  --color-bg-opacity: 0%;
  --color-border-opacity: 25%;

  list-style: none;
  margin: 0;
  padding: 0;
  background: var(--color-surface-invert);
  background: none;
  display: grid;
  grid-template-columns: repeat(20, var(--progress-step-width)) 1fr;
  gap: var(--progress-padding);
  border: calc(1.25 * var(--progress-padding)) solid var(--color-progress-bg);
  border-radius: 4px;

  & li {
    /* default is "good" */
    background: hsla(var(--color-good-hsl) / var(--color-bg-opacity));
    height: var(--progress-step-height);
    border: 1px solid hsla(var(--color-good-hsl) / var(--color-border-opacity));
  }

  & li:nth-child(-n + 13) {
    /* layer on "meh" */
    background: hsla(var(--color-meh-hsl) / var(--color-bg-opacity));
    border: 1px solid hsla(var(--color-meh-hsl) / var(--color-border-opacity));
  }

  & li:nth-child(-n + 5) {
    /* layer on "bad" */
    background: hsla(var(--color-bad-hsl) / var(--color-bg-opacity));
    border: 1px solid hsla(var(--color-bad-hsl) / var(--color-border-opacity));
  }

  & li:nth-child(-n + {{result._first.calc_3.value}}) {
    --color-bg-opacity: 50%;
  }

  & li.bar-first {
    border-radius: 4px 0 0 4px;
  }

  & li.bar-last {
    border-radius: 0 4px 4px 0;
  }

  & li.progress {
    background: transparent;
    padding-inline: 4px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    border: 0;

    & span {
      font-size: var(--font-md);
      font-weight: bold;
    }
  }
}
</style>

<ol class="highlight-progress">
  <li class="bar-first"></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li class="bar-last"></li>
  <li class="progress"><span>{{result._first.calc_2.value}}</span> to {{result._first.calc_1.value}}</li>
</ol>

Show unmet levels as faded

This style shows the unmet progress levels as solid, but semi-transparent. As the progress levels fill, they become bolder and opaque.

Setup

The data in this example shows an inverted coloring, where low is good, as it is measuring the percentage of returned or cancelled orders. You can adjust the calculations and coloring to suit your use case, but make sure you use the % formatting on the “progress” column. The following table explains each field used in the example, including the calculation formulas.

Col	Name	Description or formula	Purpose
A	Order ID Count Distinct	Total number of orders	Denominator for progress calculation
B	Count Returned	Number orders returned	Part of the numerator for progress calculation
C	Count Cancelled	Number orders cancelled	Other part of the numerator for progress calculation
D	Return and Cancel Rate (`calc_1`)	`=(B1 + C1) / A1`	% calculation for number returned or cancelled
E	Bars to fill (`calc_2`)	`=ROUND(D1 * 100 / 5, 0)`	Round to the number of bars to fill

Example code

<style>
ol.highlight-progress {
  --progress-padding: 3px;
  --progress-step-width: 12px;
  --progress-step-height: 56px;
  --color-bad-hsl: 343 100% 57.1%;
  --color-meh-hsl: 56 100% 57.1%;
  --color-good-hsl: 97 100% 39.6%;
  --color-bg-opacity: 15%;

  list-style: none;
  margin: 0;
  padding: 0;
  background: var(--color-surface-invert);
  background: none;
  display: grid;
  grid-template-columns: repeat(20, var(--progress-step-width)) 1fr;
  gap: var(--progress-padding);
  border: calc(1.25 * var(--progress-padding)) solid var(--color-progress-bg);
  border-radius: 4px;

  & li {
    /* default is "bad" */
    background: hsla(var(--color-bad-hsl) / var(--color-bg-opacity));
    height: var(--progress-step-height);
  }

  & li:nth-child(-n + 10) {
    /* layer on "meh" */
    background: hsla(var(--color-meh-hsl) / var(--color-bg-opacity));
  }

  & li:nth-child(-n + 3) {
    /* layer on "good" */
    background: hsla(var(--color-good-hsl) / var(--color-bg-opacity));
  }

  & li:nth-child(-n + {{result._first.calc_2.value}}) {
    --color-bg-opacity: 100%;
  }

  & li.progress {
    background: transparent;
    padding-inline: 4px;
    display: flex;
    flex-direction: column;
    justify-content: center;

    & span {
      font-size: var(--font-md);
      font-weight: bold;
    }
  }
}
</style>

<ol class="highlight-progress">
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li class="progress"><span>{{result._first.calc_1.value}}</span>of orders cancelled or returned</li>
</ol>

Getting started

Manage content

Analyze & build

Visualize & present

Deliver content

Model data

Manage integrations

Colored progress bars

Fill to progress level

Setup

Example code

Show unmet levels as faded

Setup

Example code

​Fill to progress level

​Setup

​Example code

​Show unmet levels as faded

​Setup

​Example code

Fill to progress level

Setup

Example code

Show unmet levels as faded

Setup

Example code