Version

Creating Stacked Chart Visualizations

Key Concepts

There are three different layouts to choose from when using stacked charts: area, column, and bar.

You can also configure the following settings:

  • Axis Configuration: the axis configuration lets you configure the minimum and maximum values for your charts. The minimum value is set to 0 by default and the maximum calculated automatically depending on your values.

    • Logarithmic Axis Configuration: if you check the "Logarithmic" checkbox, the scale for your values will be calculated with a non-linear scale which takes magnitude into account instead of the usual linear scale.


Sample Data Source

For this tutorial, you will use the "Stacked Charts" sheet in the Reveal Tutorials Spreadsheet.

Note
NOTE

Excel files as local files are not supported in this release. In order to follow these tutorials, make sure you upload the file to one of the supported cloud services or add it as a Web Resource.


Creating a Stacked Chart

1. Create a Dashboard

Tutorials-Create-New-Dashboard

In the dashboard viewer, select the + button in the top right-hand corner of the "My Dashboards" screen. Then, select "Dashboard" from the dropdown.

2. Configure your Data Source

Tutorials-Select-Data-Source

In the New Visualization window, select the + button in the bottom right corner and select your data source.

3. Select the Tutorials Spreadsheet

Tutorials-Select-Stacked-Charts-Spreadsheet

Once the data source is configured, select the Reveal Tutorials Spreadsheet. Then, choose the "Stacked Charts" sheet.

4. Open the Visualizations Menu

Tutorials-Select-Change-Visualization

Select the grid icon in the top bar of the Visualizations Editor.

5. Select your Visualization

Tutorials-Stacked-Select-Visualization

By default, the visualization type will be set to "Grid". Select any of the stack visualizations.

6. Organize your Data

Tutorials-Stacked-Charts-Organizing-Data

Stacked charts require two or more fields to be dragged and dropped into the "Values" placeholder of the data editor. In this case, the "1960", "2003", "2008" and "2010" fields have been dropped into "Values" and "Country Name" in "Label".

Changing your Stacked Chart Type

If needed, you can choose a different type of stacked chart better fitted to your needs. In order to do this:

1. Open the Visualizations Menu

Tutorials-Select-Change-Visualization

Select the grid icon in the top bar of the Visualizations Editor.

2. Select your Visualization

Tutorials-Stacked-Select-Visualization

Select the type of stack chart you need. This section has a preview of every stack chart type at the top.

Changing your Axis Configuration

Similarly to the Gauge bands, the chart axis configuration allows you to set the lowest and highest values in your chart. You can use this feature to include or exclude specific data.

1. Change Settings

Tutorials-Navigate-Settings

Go to the Settings section of the Visualization Editor.

2. Access the Axis Bounds section

Tutorials-Axis-Bounds

Navigate to Axis Bounds.

3. Change the Default selection

Tutorials-Change-Default-Selection

Depending on whether you want to set the minimum or maximum value (or both), enter the value you want the chart to start or end with.

Setting your Axis Configuration as Logarithmic

1. Change Settings

Tutorials-Navigate-Settings

Go to the Settings section of the Visualization Editor.

2. Access the Axis option

Tutorials-Axis-Bounds

Expand the Axis dropdown by selecting the down arrow.

3. Select an Axis Configuration type

Tutorials-Charts-Logarithmic

Select "Logarithmic".

Enabling Percentage Distribution

For stacked charts, you can configure the Percentage Distribution. It allows you to switch between values and percentage distribution scales for those types of charts. In order to do this:

1. Change Settings

Tutorials-Navigate-Settings

Go to the Settings section of the Visualization Editor.

2. Enable Percentage Distribution

Tutorials-Percentage-Distribution

Enable the percentage distribution setting by checking the "Percentage Distribution" box.