All posts

Build a Branded Stat Grid in Rise with Mighty Studio

Learn how to add Mighty Studio’s Stat Grid template to Rise, choose numbers or charts, set values, brand the colors, and tune the motion.

The Mighty teamMighty by Maestro
8 min read

A good stat block can do a lot of heavy lifting in a Rise course: make a key data point memorable, compare progress toward a goal, or give stakeholders the polished visual they were hoping for. Mighty Studio’s Stat Grid template gives you a practical way to do that inside Rise, without rebuilding a custom graphic every time the numbers change.

Mighty

Here’s how to add it, edit it, and make the layout, colors, chart style, and motion fit your course.

What the Stat Grid template is for#

The Stat Grid template is a Mighty Studio block for highlighting key statistics in Articulate Rise 360. You can use it in three general ways:

  • Large standalone numbers with descriptions
  • Arc-style gauge charts
  • A mix of chart types for different kinds of data

The template also includes animated entrances. Those animations play once when the block appears on screen, but the template also respects a learner’s reduced motion browser setting. If reduced motion is enabled, the stats appear statically instead of animating in. This is key when it comes to accessibility.

Step 1: Add the Stat Grid template to your Rise course#

Start in the Rise lesson where you want the statistics to appear.

  1. Click Add Block.
  2. Go to Studio Templates.
  3. Search for stat.
  4. Choose the Stat Grid preset you want to start from.
  5. Click Add to Course.

You’ll see a few preset options, including:

  • A numbers-only version
  • A triple arc gauge version
  • A version with a variety of chart styles

Pick the preset that is closest to your intended use. You can still customize the content, colors, chart types, sizing, and motion after it’s in the course.

Step 2: Edit the visible text directly in Rise#

One of the nicest parts about this template is that it supports Mighty Studio’s direct editing experience. For quick edits, you don’t have to open the full editing panel first.

  1. Click directly into the Stat Grid content in your Rise lesson.
  2. Select the word, number, or description you want to change.
  3. Type your updated text or value.

For example, if one of your stats needs to change from its placeholder value to something like 47, you can update that number right in the course editor.

This is especially helpful late in a project, when a stakeholder sends “one final number change” after you’ve already designed the section. You can make the update where you see it, which lowers the odds of missing the visual impact of the change.

Step 3: Add, remove, or reorder your stats#

Open the template editing panel when you want more control over the structure.

At the top, you’ll find the Stats collection. From there, you can:

  1. Add more stats.
  2. Delete stats you don’t need.
  3. Drag stats to reorder them.

If your section only needs one or two key figures, remove the extras. If you’re building a dashboard-style moment with four or more metrics, add what you need and then reorder them into the sequence that makes the most sense for the learner.

Within each stat, the fields depend on whether you’re displaying the grid as numbers or charts.

For a numbers-only stat, the setup is simple:

  • Value
  • Description

That’s it for the content. You may not need to open each individual stat unless you want to give a specific stat its own color treatment.

Step 4: Choose numbers or charts in the Layout panel#

Next, use the Layout panel to decide how the stats should display.

You can choose between Numbers and Charts.

If you’re using the large-number layout, the stat itself only needs a value and description. This is a good fit for simple, memorable data points: completion rates, number of customers served, average time saved, survey results, or any figure where the number is the message.

If you choose charts, each stat needs a little more information because the template has to calculate the visual fill.

Step 5: Let Auto columns keep the layout balanced#

The Columns setting is one you may not need to touch.

If you leave columns set to Auto, Stat Grid prioritizes balanced rows. For example, if you have four stats, Auto can create two rows of two instead of a row of three and a lonely single stat underneath.

That default is useful for most course layouts. It keeps the block feeling intentional without asking you to manually fuss with the grid every time the number of stats changes.

If you do need precise control, you can adjust the columns yourself. But for many Rise builds, Auto is the friend you want.

Step 6: Set the size for number-based stats#

For the numbers layout, use the size control to adjust the scale of the large numbers.

A middle value around 100 gives the numbers a strong presence without letting them overpower the rest of the lesson. That’s a good starting point if you’re balancing emphasis with readability.

Step 7: Use solid or gradient styling#

In the Appearance panel, choose how the stat visuals should be filled.

You can use Solid fill or Gradient fill.

For gradients, you can select two fill colors. Instead of choosing between a radial or linear gradient, this template gives you a gradient angle control. That lets you rotate where the first and second parts of the gradient appear across the number or chart.

Because the surface area of a number or chart segment is smaller than a full background block, that angle control gives you a cleaner way to fine-tune the result.

Give one stat its own color

If one metric needs special emphasis, open that individual stat and enable its custom color option.

From there, you can:

  1. Set a solid color for that stat.
  2. Add a second color to create a custom gradient for that specific stat.

Use this sparingly. It’s great when one number is the “hero” metric, but if every stat has a different treatment, the grid can start to feel noisy.

Step 8: If you use charts, enter values with matching units#

Chart-based stats need two values:

  • The value being represented
  • The “out of” value, or denominator

In the video example, one stat is set as 62 out of 80.

Remember to write the value the way you want it to appear on screen, and make sure the denominator uses the same format and units.

For example, if your visible value is abbreviated as 1.8k, the denominator should use a matching abbreviated format. If you switch the denominator to 2400 while the value remains 1.8k, the chart calculation will not visually communicate the intended proportion.

Keep the units consistent:

  • Good: 1.8k out of 2.4k
  • Risky: 1.8k out of 2400

Step 9: Pick the chart style for each stat#

Within each chart stat, you can switch between different chart options depending on the relationship you’re trying to show.

The video calls out chart types like:

  • Arc or gauge-style charts
  • Pie-style charts
  • Donut-style charts

Choose the shape based on what the learner needs to understand. A gauge can work well for progress toward a target. A donut or pie style may feel more appropriate for part-to-whole relationships.

There’s no single correct option here; the right choice depends on the data and the tone of the course.

Step 10: Size chart-based stats#

Chart layouts have their own size range. The number inside the chart scales along with the chart itself.

There’s also a helpful balancing behavior: if one value is longer and needs to shrink to fit, the other chart numbers shrink proportionally too. So, if you switch from an abbreviated number to a longer written-out value, the grid still feels consistent instead of having one awkwardly small label and two oversized ones.

Step 11: Adjust the chart appearance#

For chart-based stats, the Appearance panel includes the same solid and gradient options, plus a couple of chart-specific controls.

You can adjust:

  • Edge style: choose Rounded or Sharp
  • Empty chart segment color: recolor the unfilled portion of the chart

The edge style is a brand fit decision. Rounded edges may feel softer and more modern; sharp edges may better match a more structured or technical visual system.

The empty segment color is useful when your brand palette needs a specific neutral, or when the default empty state doesn’t have enough contrast against the surrounding block.

Step 12: Choose an entrance animation#

Finally, open the Motion panel.

For number-based stats, the motion options include:

  • Count up, where the number increases until it reaches the final value
  • Rise into place, where the stat gently moves up and fades in

For number stats, you can also toggle shine when settled. When it’s on, a shine passes across the numbers after they rise or count into place. When it’s off, the animation stays simpler.

For chart-based stats, the options are a little different:

  • Count up and draw, where the number counts and the chart grows to its endpoint
  • Draw only, where the chart draws to its endpoint
  • Rise into place, similar to the number version

The shine option is not available for charts. As noted in the video walkthrough, it was tested and looked odd, so it’s not part of the chart motion controls.

Whichever motion you choose, remember that the animation plays once, and reduced motion settings are respected.

A quick brand and accessibility check#

Before you move on, preview the block like a learner would see it.

Check that:

  • The numbers are large enough to read comfortably.
  • The descriptions explain what each statistic means.
  • Chart values use matching units.
  • Gradient colors still provide enough contrast.
  • Motion adds emphasis without becoming distracting.
  • The empty chart segment color is visible but not competing with the filled portion.

Stats are only useful if learners can interpret them quickly. The goal is not just to make the data look polished; it’s to make the key takeaway easier to grasp.

Try it in your next data-heavy lesson#

The Stat Grid template is a handy option when a plain paragraph undersells the importance of your data but a custom graphic would slow you down. Add it from Discovery Library, search stat, choose a preset, and then tune the values, layout, colors, sizing, and motion right inside Rise.

Next time you need to spotlight a few metrics, try building them as a Stat Grid first. You may get the polished visual your course needs without leaving your Rise workflow.

Try Mighty free for 30 days.

Install in Chrome, open your Rise course, and ship the interactives you couldn’t before. No credit card. Cancel any time.