Skip to main content
Chart Component

DIGIDECK's Chart Component, available in the component library, allows you to build a Line Graph, Bar Graph, and Pie Chart.

Will Matysik avatar
Written by Will Matysik
Updated over 5 months ago

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

  1. Navigate to Layout Mode: On your slide, click the "Layout tab"

  2. 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

    • Make the padding uniform around all sides by selecting the first box

    • Set the padding separately for each side by selecting the second box

    • Set the padding for all sides by entering a number in the box or boxes. The higher the number, the more padding is added.

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

Did this answer your question?