Add and edit charts | Colors and options for diagrams

With Open as App, you can add many types of charts, such as donuts, funnels, or column charts to your app. With the chart feature, you can create business intelligence dashboards directly from your Excel file with just a few clicks. This gives you a quicker overview of the results of your calculations - even on your mobile device. Reports created with Open as App can be shared easily within your organization, or provided to customers.

 

---

Table of Contents

• Where can I add a chart?
• Supported chart types
• Import charts from excel
• Add charts manually
• Edit charts in the preview
• Add a caption
• Enable or disable data markers
• Enable or disable the chart legend
• Define colors for the chart
• Add captions for the X-Axis and Y-Axis
• Add series captions
• Create grouped and stacked diagrams
• Examples

---

Where can I add a chart?

You can add a chart to your app in "Edit" » "Add Chart".

1. Open your app in the web portal.
2. Navigate to "Edit".
3. Select "Add chart".

The diagram is added to the page of your app that is visible in the preview. If your app consists of multiple pages, you can select the page using the tabs at the bottom of the preview.

---

Which charts are supported?

The following charts are currently available: Area chart, bar chart, bubble chart, column chart, pie chart, funnel chart, line chart, pie chart, net chart, pyramid chart, spline chart (also polynomial move), spline area chart, stacked bar chart, stacked bar chart, stacked area chart.

We also support a combination of Column and Line in one chart when both use the same axes. 

Please note that the preview can differ from the result on your device. Save your changes and check the results on your device.

---

Import charts from Excel

You can import diagrams that are already included in your Excel file with one click into your app. The logic behind the diagrams, of course, continues to be preserved.

To import existing charts, proceed as follows:

1. Open your app in the web portal.
2. Navigate to "Edit".
3. Select "Add chart".
4. Click the button "Import All Charts".
   Alternatively, you can select individual diagrams for the import by selecting the checkbox "Select for import" in the desired diagrams.

Please note that we can not automatically recognize all chart types and constellations from Excel. Be sure to use only the diagrams listed in the section "Which charts are supported?". If possible, do not use complex layouts (diagram format templates) and options.
If charts are recognized in your Excel file, a small information box will appear next to the "Add chart" menu item.

---

Manually add charts

We are working on an easy-to-use and yet complex chart assistant. You can add simple diagrams to your app by selecting an area in the spreadsheet. However, the recommended way is to create the diagrams already in your Excel file and import them here with one click as explained in the section "Import charts from Excel".

To manually add a simple diagram to the app, follow these steps:

1. Open your app in the web portal.
2. Navigate to "Edit".
3. Select "Add chart".
4. Select the area from which you want to create a chart.
   (To switch between the worksheets in your file, use the tabs.)
5. Scroll down and select the appropriate chart type.
6. Click "Add diagram for this area".

Please make sure to also mark the "captions" of the respective values. These are used for the legend. Take a closer look at the animation below if you are not sure how the data will be marked for the chart.

 

We are working on a possibility to add independent areas for a diagram. For example, if the labels for a chart are in column A, but the values are ​​from column D. Currently we recommend to add these charts in your Excel file and to import them with one click. (See section "Import charts from Excel".

---

Edit charts in the preview

Diagrams can be edited very detailed through the editor. There you can define colors, add labels, or change the chart type.

The editor is divided into several areas: "Main", "Data", "Style" and "Advanced".

In the Main tab, you can make general settings. In the "Data" tab, you can see the data area displayed by the diagram and can make data-specific settings here. In the "Style" tab, you can visually adjust the diagram - for example define colors or change the height of the diagram. All definitions are displayed in the "Advanced" tab - this area is only recommended for advanced users.

To learn how to color your chart or to enable additional options, see the other sections of this article.

To open the editor, proceed as follows:

1. Open your app in the web portal.
2. In the preview, hover with the mouse over the graph you want to edit.
3. Click the pencil icon to open the editor.

---

Add a caption

You can title your diagram via the editor.

Within your app, you can then open the diagram in full screen by clicking on the heading.

To add a chart title, do the following:

1. Open the Chart Editor.
2. Navigate to the "Main" tab.
3. Enter the desired caption for the diagram.
4. Confirm the changes by clicking on the checkmark.
5. Save the changes.
6. Update your app.

---

Enable or disable the chart legend

You can show or hide the chart legend in the editor. Please note that a legend is not absolutely necessary for individual chart types, as the labels can be read, for example, under each column in the diagram.

To activate the chart legend, proceed as follows:

1. Open the Chart Editor.
2. Navigate to the "Main" tab.
3. Activate the "Show legend" button.
4. Confirm the changes by clicking on the checkmark.
5. Save the changes.
6. Update your app.

---

Enable or disable data markers

Reading numbers directly in the column or along the line is usually helpful to get a quick overview. However, what if the diagram contains so much data that the data markers with the values ​​no longer meet your purpose? Depending on the diagram, the data markers for the individual columns are activated or deactivated by default.

To enable data markers, do the following:

1. Open the Chart Editor.
2. Navigate to the "Main" tab.
3. Activate the "Show data markers" button.
4. Confirm the changes by clicking on the checkmark.
5. Save the changes.
6. Update your app.

---

Define colors for the chart

The color is defined by the color selector. Open the color selector by clicking on the small triangle icon next to the color value.

To change the colors of your diagram, proceed as follows:

1. Open the Chart Editor.
2. Navigate to the "Style" tab.
3. Define the colors for the corresponding elements of the diagram.
4. Confirm the changes by clicking on the checkmark.
5. Save the changes.
6. Update your app.

The bars define the color area (bar to the right of the mixing palette) and the alpha - ie the opacity (the bar under the mixing palette). The final color is then defined by the position of the selection circle on the mixing palette. A detailed article about how to work with the color picker can be found here: "Change colors".

Alternatively, you can enter the RGB values ​​or the HEX code of your desired color in the corresponding fields.

• Text color of the legend : defines the color of the texts in the diagram legend.
• Title Text color : defines the color of the title label . The title can be entered in the "Main" tab. The title text color also determines the color of the X and Y axis labels
• Axis color: defines the color of the X axis and the Y axis.
• Background color : defines the background color of the chart.
• Color Palette : defines the color palette to use for your diagrams. Use the + button next to "Color palette" to add a color to the palette. Alternatively, you can select from predefined palettes by clicking on the icon next to the + button. Info : If fewer colors are added to the palette than values ​​are available in the graph, the palette repeats itself automatically.

---

Add captions for the X-Axis and Y-Axis

You can label the axes of your diagram.

To change the axis labels, proceed as follows:

1. Open the Chart Editor.
2. Navigate to the "Data" tab.
3. Enter the desired names for "X-axis labeling" and "Y-axis labeling".
4. Confirm the changes by clicking on the check mark.
5. Save the changes.
6. Update your app.

---

Add series captions

You can label the data series of your diagram.

To change the data series titles, proceed as follows:

1. Open the Chart Editor.
2. Navigate to the "Data" tab.
3. Enter the desired names for individual data series.
4. Confirm the changes by clicking on the check mark.
5. Save the changes.
6. Update your app.

Please note that the serial labeling is only displayed if the legend for this diagram is activated.

---

Create grouped and stacked diagrams

By merging several data series into one diagram, it is possible to compare them better with each other. Currently, the (manual) creation of grouped stacked diagrams can only be realized via customizations in the portal. We therefore recommend creating these charts in the source file and then importing them into your app. (See section: Import charts from excel).

If you don't have the possibility to create a chart in the source file, you need to work in the portal. To do this, you need to understand where the data comes from and how the visual representation is defined. 

Basically, as in section "Add charts manually", you have the possibility to add diagram. But this is limited to a range of 2xN or Nx2 columns and rows.  

Data range 

To be found in the settings of the diagram under DATA. There you will find the data references to which the diagram refers. 

A: Data area for X-axis labeling| B: Data range for graph B (series 1) |   

C: Data range for graph C (series 1) 

To change the data series, proceed as follows: 

1. First create a chart manually.
2. Open the chart editor.
3. Navigate to the "Data" tab. 
4. Enter the desired labels for individual data series. 
5. Confirm the changes by clicking on the check mark.
6. Save the changes. 

Visual presentation

You define this under the ADVANCED tab in the Chart Series Types area. 

Example 1)

B: Definition as line  | C: Definition as line

Example 2)

B: Definition as line | C: Definition as column

To change the visual presentation, proceed as follows: 

1. Open the diagram editor. 
2. Navigate to the "Advanced" tab.
3. Enter the desired type under Diagram series types.
4. Save the changes. 

Beware: changes will be visible after saving only. 

Difinition types:

• line 
• spline 
• column 
• bar 
• area 
• splinearea 
• bubble 
• columnstacked 
• barstacked 
• areastacked 

---

Examples