Adobe Express: Add Charts

*NOTE This guide was created on 13th of August 2024. Please note that due to regular SaaS updates, some features or instructions may differ slightly from the current version.

This guide will walk you through the process of adding beautifully designed charts to your presentations, infographics, documents, and more, helping you showcase your data with clarity and impact.

To create a chart
  1. Open a new or existing design in the Adobe Express editor.
  2. Select Charts and grids from the left pane.
Creating Bar, Donut and Pie charts

1. Select the desired Bar chart, Pie chart or Donut chart from the Charts section.

An image showing the standard Bar chart has been selected. Notice the location of the data labels on the graph.
An image showing the standard Bar chart has been selected.  Notice the location of the data labels on the graph.

*NOTE Clicking off the chart in the main window will close the chart edit menu. To regain access to this menu to continue editing the chart, click anywhere on the chart.

2. Scroll to the LABEL and VALUE fields and add your data.

An image showing how to customise the chart being created, by adding values to the Label and Value content.

3. Use the icon to manage the list by adding a new item, deleting an item, or moving an item’s placement.

An image showing how the ‘More’ icon to easily manage the items on your list.
Image showing how the ‘More’ icon to easily manage the items on your list.

4. Use the ‘+ Add New Item’ button to add additional content to the chart.

5. To customise aspects of the chart, select the configuration icon that is located directly to the right of the Chart type label. Different customisations are available depending on the chart type.

An image showing how to customise aspects of the chart, select the configuration icon that is located directly to the right of the Chart type label.
Select the configuration icon located directly to the right of the Chart type label to apply customisations to aspects of the chart.

Bar charts can be customised as follows:

  • Legend: Display or hide the chart legends.
  • Values: Display the chart values at the bottom of the chart or on top of each bar.
  • Grid: Display a horizontal grid to the graph.
  • Labels: Display or hide X & Y axis labels.
  • The corner roundness of each bar in the chart
  • Column spacing between each bar (affect the bar thickness and not the width of the graph)
  • Font settings: Format font to the desired type, size, colour etc.

An image shows an example of a stylised bar graph with some of the above customisations configured.
The image shows an example of a stylised bar graph with some of the above customisations configured.

Creating a Progress Bar, Donut, Half-Donut and Gauge charts

1. Select the desired Progress chart from the Charts section.

    1. Progress bar
    2. Progress donut
    3. Progress half-donut
    4. Gauge chart

An image showing the Progress charts with the standard Progress bar chart selected.
Image showing the Progress charts with the standard Progress bar chart selected.

2. Use the ‘Value’ slider to manage the percentage value shown in the progress chart.

3. To customise aspects of the chart, select the configuration icon that is located directly to the right of the Chart type label. Different customisations are available depending on the chart type.

An image showing how to customise aspects of the chart, select the configuration icon that is located directly to the right of the Chart type label.
Select the configuration icon located directly to the right of the Chart type label to apply customisations to aspects of the chart.

For example, a bar chart can be customised as follows:

    1. Label: Turn the toggle to show or hide the Label.
    2. Rounded Corners: Change corner roundness.
    3. Thickness: Use the slider to increase or decrease the thickness.
    4. Font settings: Format font to the desired type, size, colour etc.

An image showing an example of a stylised Progress Chart with some of the above customisations configured.
Image showing an example of a stylised Progress Chart with some of the above customisations configured.

4. To customise the chart colours, select Fill and Value and then select the desired colour from the menu.

5. To customise the chart further, drag the Opacity slider to increase or decrease the opacity of the chart.

This guide was created on 13th of August 2024. Please note that due to regular SaaS updates, some features or instructions may differ slightly from the current version. 

Tagged: