Support Centre

Search

Add an statistics (stat) chart to your accessible design

Renée Meloche
Renée Meloche
  • Updated

A stat (statistics) chart is a great way to display a simple data point like a percentage or one numeric value by combining that number and a visual representation like a series of icons, or simple charts like a donut, half-donut or progress bar. 

A partial view of a white canvas in the upgraded Venngage Editor. In the left sidebar, the Charts tool is expanded into a panel that comes partway into the frame from the left, displaying a gallery of charts that a user can add to the design canvas. Under the heading Stat, there are four chart options: Donut Stat, Half-Donut Stat, Progress Bar Stat and Icon Stat. A user clicks on each of tehse charts in the left sidebar, one at a time, adding them to the design canvas and resizing them so that they are arranged in a loose grid.

Venngage makes it easy to add accessible stat charts to your design!

Add a stat chart to the design canvas

Create an accessible template in the upgraded Editor.

Select or click Charts in the left sidebar. Under the heading "Stat", choose a chart type: donut, half-donut, progress bar or icon stat. Click on the chart to add it to the canvas.

In the upgraded Venngage Editor, a presentation slide appears in the design canvas area. The slide has some elements like a decorative border at the bottom, and a small paragraph of text to the left with the heading 'Example 3'. A user clicks on 'Charts' in the left sidebar of the Editor, expanding the gallery panel and pushing the design canvas further to the left. Under the heading Stat charts in the panel, several chart options are visible; the user clicks on Icon Stat and adds an Icon Stat chart to the canvas. It appears, by default, as a chart with the percentage 67% on the left side, and a row of 10 icons in two contrasting colors: a dark blue representing the 67%, and a light blue representing the remaining 53%.

Customize chart appearance

Icon stat charts can be customized to suit your brand or design theme, with color, font, spacing and icon tools. 

Use the selection tool to resize and reposition the stat chart on your canvas, with the bounding box controls. 

In the upgraded Venngage Editor, a presentation slide is partially visible in the design canvas area. The slide has a blue icon stat chart, and some other elements like a decorative border at the bottom, and a small paragraph of text to the left. The icon stat chart displays the percentage 67% on the left side, and a row of 10 icons (simple silhouettes of a head and shoulders) in two contrasting colors: a dark blue representing the 67%, and a light blue representing the remaining 53%. A user clicks on the stat chart to reposition it on the canvas, to the right of the paragraph of text, and then uses the bounding box to resize it. Using the center node on the right-hand side of the box, the user makes the chart narrow; this results in the icons being rearranged, from a single row of 10 to two rows. The top row contains 8 icons and the bottom row has 2.

Value

Change the value of the stat chart and how the chart or icons display. Select the numerical value (the percentage) on the stat chart. Type the desired percentage in the "Value" field in the top toolbar.

Total items

Change the number of icons that appear in an icon stat chart to represent the value. For example, you can display the value "75%" with 4 total icons or 50, changing the scale of the chart.

A partial view of a canas in the upgraded Venngage Editor shows a design with a white background, and an icon stat chart on the canvas. The chart displays the number 75% and 100 icons of apples, in 8 rows of 13 (the last row with 9 icons). Of those, 75 of the apple icons are red; 25 of the icons are green. With the chart selected, a user clicks on the Chart Value text field in the top toolbar, where the value 75% appears. The user types 50% into the text field and then clicks into the Total Items text field beside it in the top toolbar. A drop-down menu appears with number selections, but the user types into the text field itself and changes the number 100 to 2. On the design canvas, the icon stat chart now displays the number 50% and two apple icons, one of which is red, the other green. The user clicks into the Chart Value field again and changes it back to 75%, which appears next to the chart on the canvas and causes the apple icons to change again; one is red, and the second is now half red, half green. The user changes the Total Items number to 4; four apple icons now appear in the chart, the first 3 of which are red, and the fourth of which is green. The user clicks into Chart Value again and changes the number to 89%; this new number appears next to the chart on the canvas. The user clicks into Total Items and chooses the number '50' from the drop-down that appears when they click on the text field; the apple icons in the chart on the canvas change again, this time appearing in four rows of 13 (the last row with 11 icons, the last 6 and a half of which are green).

Spacing, Corner Rounding, Bar Height, Donut Hole

Different charts have different customization options. 

Change the arrangement of the rows and columns in an icon stat chart simply by resizing it. The number of icons that appear in a row or column will depend on the chart's size, as well as the size of the icons, without changing its Value or Total ItemsA partial view of a white design canvas in the upgraded Venngage Editor, with an icon stat chart at the top. The stat chart displays the percentage 34% and a single row of 10 apple icons; the first three apples are red; the fourth apple is partially red and 3/4 green, and the remaining icons are green. A user changes the Value of the chart to 76% and the Total Items to 50 in the top toolbar; the changes to the chart are visible on the canvas. The chart now appears with 4 rows of apple icons; the top three rows have 13 icons across and the bottom row has 11. The apple icons are red, up to the last apple icon in the fourth row, which is entirely green; and the 11 apple icons in the last row are green. The user clicks on the chart to select it and uses the bounding box to resize the chart, resulting in the arrangement of the chart rows and columns to change. When the user finishes, the chart has 7 rows, with 8 icons across in each, save for the last row which has 2. The green apples begin in the 5th row, with the last two apples now green, and the last two rows made up of entirely green apples..

 

Select a progress bar chart and use the slider to calibrate the Vertical Spacing between the bar and the number text.

A partial view of a design canvas in the upgraded Venngage Editor, where several stat charts are visible in the top left corner of the page. A user selects the progress bar chart at the bottom of the design page and then selects the Vertical Spacing tool that becomes available in the top toolbar. Using the slider that opens in a widget when the user clicks the tool, the user changes the spacing between the text that appears over the bar chart (in this case, 38%) and the bar chart itself. The user then closes the tool and expands the chart, resizing it to make the space more visible.

Change the corner rounding to straight or rounded using the slider in donut, half-donut and progress bar charts. 

A partial view of a design canvas in the upgraded Venngage Editor, where several stat charts are visible in the top left corner of the page. A user selects the progress bar chart at the bottom of the design page and then selects the Corner Rounding tool in the top toolbar. Using the slider that opens in a widget when the user clicks the tool, the user changes the rounding on the darker part of the progress bar, making the corners either more rounded or less.

Donut hole size determines the width of the donut or half-donut chart as it appears in the stat chart. Use the slider to increase or decrease width.

A partial view of a design canvas in the upgraded Venngage Editor, where several stat charts are visible in the top left corner of the page. A user selects the half-donut chart at the top right of the design page and then selects the Donut Hole tool in the top toolbar. Using the slider that opens in a widget when the user clicks the tool, the user changes the width of the half-donut chart, making it smaller or larger; at the same time, the percentage value displays in larger or smaller text to compensate for the size of the chart.

Use the "Bar Height" tool to increase or decrease the width of the bar in progress bar charts the same way.

 A close-up of the top toolbar in the upgraded Editor, where the Bar Height tool is selected and the widget is open, displaying a slider the same as the one that appears in the Donut Hole tool widget for Donut and Half-Donut stat charts.

Change chart type

Easily change the chart type from the top toolbar. 

Select the chart. Click or select the Chart Type menu in the top toolbar; select a different chart type from the drop-down menu. The chart type will update on the design canvas. 

A partial view of a white canvas in the upgraded Venngage Editor shows a design with a white background, and three stat charts grouped in the left side of the page. A user selects the bottom chart, a progress bar chart that appears in default dark blue and light blue colors, with the number 38%. In the top toolbar, a drop-down menu for Chart Type appears, and the user clicks on it, selecting Icon Chart. On the canvas, the progress bar chart changes to an icon chart, with a single row of simple silhouette (head and shoulders) icons, and the same percentage. The user clicks the Chart Type drop-down in the top menu again and selects Half-donut chart, changing the chart on the design canvas to a half-donut and the same 38%. The user clicks into the top menu chart again and changes the chart back to a progress bar.

Edit the chart color, text or icon

Color

Change the color of the icons or text that appears on the stat chart by clicking (or Tab-Spacebar to select) that part of the chart.

The Fill Colors are the colors in the chart or chart icons. Fill Color 1 always represents the chart's Value percentage. 

Click on Fill Color or Font Color to open the Color Tool widget. Select from Project or Brand Kit Colors by clicking the color swatch circles underneath, or use the color picker at the bottom of the widget to select a custom color. 

The bottom of the widget will indicate whether your color choices meet contrast standards. 

In the upgraded Venngage Editor, a presentation slide is partially visible in the design canvas area. The slide has a blue icon stat chart, and some other elements like a decorative border at the bottom, and a small paragraph of text to the left. The icon stat chart displays the percentage 63%, and two rows of icons (simple silhouettes of a head and shoulders). The top row has 6 icons and the bottom row has 4; the icons appear in two contrasting colors: a dark blue representing the 63%, and a light blue representing the remaining 57%. In the bottom row, the first icon is partially dark blue. The chart is selected, and tools appear in the top toolbar above the canvas, including a Font Color tool. The user clicks on Font Color in the top toolbar and chooses a dark teal color from the tiles that appear under the heading Project Colors. The user then clicks on the icons in the chart on the canvas, and a different suite of tools appear in the top toolbar. The user clicks on the first color tile, Fill Color 1, which appears with the same dark blue as the icons in the chart. From the Project Color tiles in the Color Tool widget that opens, the user selects a medium teal, then closes the Fill Color 1 tool by clicking on the Fill Color 2 tile next to it in the top toobar. The user selects a bright red colors from the tiles under Project Colors that appear in the Color Tool widget. The user closes the Color Tool and clicks

Font

Click the Value percentage of the chart (or use Tab-Spacebar to select) as it appears, depending on the chart type. 

Use the top toolbar to customize the text appearance:

  • Click or select Font Color to open the Color Tool widget and change the color of the text, independently of the rest of the chart
  • Click or select Font family to open the drop-down and select a different font face
  • Use the + and - buttons or type the font size into the Text size field to change it (NOTE: At this time, text size is only customizable on Progress and Icon Stat charts; the text size in Donut and Half-donut charts will change proportionally when you resize the chart using the bounding box).
  • Style the font with Bold, Italic and Underline 

In a partial view of a white design canvas in the upgraded Venngage Editor, three stat charts are visible. The bottom chart displays 38% in large text over a bar chart, in default dark and light blue. A user clicks on the '38%' portion of the progress chart. A suite of tools to customize the text appear in the top toolbar. The user clicks on the Font Color icon in the top toolbar and chages the color of the text to a bright green. The user then clicks on the Font family drop-down and selects the font face Cabin, changing the appearance of the percentage. Using the minus button to the left of the Text size, the user changes the text size from 91 to 88px. Then the user clicks on Bold, Italic, and Underline to style the text.

Icons

Change the icon in an Icon Stat Chart by swapping it with any mono-color icons in our gallery. 

Double-click the icons in the Icon Stat Chart on the design canvas, or select the Icon Stat Chart and click "Replace" in the top toolbar to open the Icon Replace panel from the left sidebar.

Click on an icon pack to browse icon thumbnails, or enter a specific search term into the top search bar. Select an icon from the gallery and it will change in the chart on the canvas. 

In the upgraded Venngage Editor, a presentation slide appears in the design canvas area. The slide has some elements like a decorative border at the bottom, and a small paragraph of text to the left with the heading 'Example 3'. To the right of the slide is an icon stat chart, with 7 rows of six icons (simple silhouettes of people showing only heads and shoulders). The first five rows of icons are a medium teal, with the sixth row displaying the first icon in the medium teal, then second icon half teal, half bright red, and the remainder of the icons in bright red. A user clicks on the icon chart to select it, then clicks Replace in the top toolbar, opening the Icon Replace panel from the left sidebar. An icon pack of mono-colored icons is displayed in thumbnails in the panel; user types 'exam' in the search bar at the top of the panel and returns results including icons of papers, checkmarks, diploma caps, etc. The user selects from the icons in the gallery; when the user clicks on an icon from the gallery in the Icon Replace panel, it replaces the icons in the stat chart on the design canvas.

Add alt text to your chart 

Describe stat charts that appear on your design canvas to users with visual impairments or readers with other accessibility needs.

Select the chart. Click "Alt Text" in the top toolbar; add your descriptive text. A simple description, to let the user know how the chart appears and the statistic it represents, is perfect. Here are some examples: 

  • A stat icon chart, with the value '63%' and a grid of 9 rows and 6 columns of icons representing diploma caps. Starting at the top left and continuing left to right and down, 63% of the icons are green. The remaining 37% of the icons, continuing from partway through the fourth-last row, are red. 
  • A stat half-donut chart with the value 55%. The first part of the half-donut is dark purple, representing 55%; the remainder of the donut is light purple. 
  • A stat progress bar chart with the value 90%, where the percentage is written in large, dark brown letters. Underneath it, the bar chart is mostly red; the far, left end of the bar is pale pink. 

 

The feature(s) discussed in this article is available on the following Venngage subscription plans: Free, Premium, Business and Enterprise.

Curious about upgrading? Compare our plan features side by side.

Was this article helpful?

0 out of 0 found this helpful

Have more questions? Submit a request