The Chart Component allows you to build a line chart, bar chart, or pie chart within a slide by using data entered into a grid similar to a spreadsheet.
Jump to Article Sections:
Adding a Chart Component to your Slide
Navigate to Layout Mode: On your slide, click the "Layout tab"
Open Component Store: On the left bar of your screen, click the "+" icon to add a component. This will open the Component Store.
screenshot of steps 1 and 2 above
3. Search and Add: in the Component Store, enter "Chart" in the search bar, then select the Chart component to add it to your slide
screenshot of step 3 above
Positioning and Sizing
4. Resize: Once the component is added, use the resize handles (white dots) to adjust the size of the chart on the slide
5. Drag and Drop: Drag and drop the chart anywhere in your grid to re-position the location of the chart within your slide
screenshot of step 4 above
Adding Chart Data and Selecting Chart Type
6. Open the Data Editor: To select the chart type and edit the data inputs, select the "Data" button in the top left border of the layout window.
screenshot of step 6 above
7. Choose Chart Type: In the Chart Data popup you will see two sections, Dropdown Input and Chart Data. To change the chart type, select the "Dropdown Input" field. You will be able to select from three types of charts, Line, Bar, or Pie.
β
screenshot of step 7 above
screen shot of the drop-down when "Dropdown Input" is selected
TIP:
You can easily change the chart type after you input your data to use the type that best displays your data.
8. Input Data: The second section of the Chart Data pop-up is the data grid. The chart data grid will include placeholder data to start. You can overwrite that data by directly typing data into the cells, or by copying and pasting data from a spreadsheet. Hit "Save" to update your chart.
See Chart Data Options section below for additional details on the Chart Data section.
TIP:
Only the top row and the first column (Column A) allow for text. All other cells must contain a number.
screenshot of step 8 above
Chart Data Options
Copying and Pasting Data into Chart Data
To paste data from a spreadsheet into the Chart Data grid, copy the rows and columns from your spreadsheet, and then select the uppermost left cell in the grid, directly underneath the letter A, and select "Paste"
TIP:
You do not need to add rows and columns before pasting data. If you paste data that has more rows and columns than the data grid currently has, the additional rows or columns will automatically be added.
screenshot of the cell to select when pasting an entire select of data from a spreadsheet
β
Adding Additional Columns to Chart Data
To manually insert a column in the data grid, select the drop-down arrow of the column to the right or left of where you want to add your column. Then select either "Insert Column Left" or "Insert Column Right"
Adding Additional Rows to Chart Data
To add additional rows to the chart data grid, copy and paste data with the number of rows you need into the data grid. See section above for details on copying and pasting chart data.
Understanding Data Representation in Charts
When entering data into the data grid for your chart, it's important to understand how this data is visually represented.
Here's how the data grid translates into different chart types:
Line Chart:
Columns as Lines: Each column in your data grid will be represented as a separate line on the chart
Rows as Data Points: Each row will be plotted as data points along the X-axis, showing the progression of values over time or categories
TIP:
Line Charts need 2 or more columns of data to draw a line. If you only have 1 column of data in the grid, your chart will look like it's blank.
Bar Chart:
Columns as Series of Data: Each column in your data grid becomes a series of bars in the chart
Rows as Bars: Each row in your data grid will be represented as a separate bar on the chart
TIP:
Bar charts work well in many scenarios, including the following:
1 row of data and 1 or more columns
Multiple rows of data and 1 or more columns
Pie Chart:
Column for Values: The values from a single column are used to create the slices of the pie.
Rows as Slices: Each row represents a slice of the pie, with the value determining the size of the slice.
TIP:
Pie Charts are best used with only a single column of data. A Line or Bar chart is recommended if you have multiple columns of data.
Styling
To edit the styling of a chart, while in Layout mode, select the chart component on your slide then click the "Styles" button in the top left border of the layout window.
screenshot of the location of the Styles button while in Layout mode on a slide
Chart Colors
Each chart type will allow you to edit the color of each line, each bar, or each wedge of pie. In the "Styles" pop-up menu, to change a color, click "Select Color"
screenshot of of the Chart Colors section of the Styles menu
Container Styles
The Container Styles section allows you to change the outside container of the chart component:
Background Color: Changes the Background Color of the chart
Border: Creates a border around the entire Chart component
Select the color of the border
Enter the thickness of the border line, in numbers
Select the type of border line, such as solid, dashed, dotted, etc.
Border Radius: Border radius allow you to change the corners of the chart from squared to rounded
Make all corners uniform by selecting the first box
Set each corner separately by selecting the second box
Set the border radius for the corners by entering a number in the box or boxes. The higher the number, the further the border corners will pull inward (ie, rounder). A zero border radius is squared corners.
Padding: Add padding / spacing between the chart and the border
Global Chart Styles
The Global Chart Styles Section allows you to customize the text options on the chart, as well as chart options such as Grid Lines, Grid Lines color, a Legend, Tool Tips, etc.
Text Styling
Style your chart text by customizing the following:
Text Color
Font
Font Size
screenshot of chart text styling options
Grid Line Styling
Chart Lines Color
Show / Hide Grid Lines
screenshot of Grid Lines styling options
Other Options
Show / Hide Legend
Show / Hide Tool Tips
Show / Hide X Axis
Show / Hide Y Axis
screenshot of Show/Hide options
Chart Examples, including data and style options
The example images below will show you an example of a Line Graph, Bar Graph, and Pie Chart, as well as the Data and Styles used to create the Chart.
Line Graph
Line Graph - Data Example
Line Graph - Styles Example
Bar Graph
Bar Graph - Data Example
Bar Graph - Styles Example
Pie Chart
Pie Chart - Data Example
Pie Chart - Styles Example