The smart chart is a wrapper around existing chart types that can be used together with all existing chart types within VizFrame. The main purpose of the smart chart is to reduce development effort. However, this comes at the expense of decreased flexibility. The smart chart creates visualization based on the underlying OData service and the corresponding annotations. It also adds some generic functionality, such as a toolbar, complex personalization settings, variant management, breadcrumb, tooltip, drilldown and zoom capabilities. Everything that can be done using the smart chart can also be achieved using the standard VizFrame Chart, but with more development effort.

Usage

Use the smart chart if:

• Data is fed through OData services.
• You need to reduce development effort.
• You would like to profit from drilldown and detailed information support.

Do not use the smart chart if:

• You create your own UI coding, whereby the data is not fed through OData services. In this case, use the VizFrame Chart instead.

Responsiveness

Layout

Components

Behavior and Interaction

Selection

Data points can be selected by clicking or dragging the mouse. Single or multiselection are both possible. Data points, labels, and legend items can be selected. Clicking into the background deselects all data points. For more information, see the chart selection.

Details

Resources

The network graph displays a large amount of data by highlighting the relationships between individual records. Records are displayed as nodes, and connectors (lines) show the relationships between them. The vivid display of network nodes can highlight non-trivial data discrepancies that would have been previously overlooked.

Usage

Use the network graph if:

• You need to display a large amount of data and contextual information. Use cases include material management and supply chains, logistics structures, and value chains.
• You want to display complex nonlinear structures, trees, and generic charts (such as organizational charts).
• You want to give the data a spatial context.

Do not use the network graph if:

• You want to visualize a document flow. Use the Process Flow control instead.
• You want to enable editing of displayed data. Note that the network graph is available in read-only display mode.
• You need to embed the chart into smaller areas or use it as embedded analytics.

Responsiveness

Layout

Types

The network graph has two basic variants:

Components

By default, the network graph is split into the toolbar area and chart area. In addition to clearly illustrating the functions of the chart elements, the chart area also displays an action menu whenever a node is selected. This menu contains a dialog containing detailed information.

Application developers can also configure groups and connectors (lines) to display action menus or dialog boxes whenever they are selected.

Behavior and Interaction

Navigation and Zoom

Components Interaction

Styles

Each node can be visualized with a circle or rounded rectangle shape. These two shapes can be combined inside one graph to provide users with deeper semantic meanings: for example, circular nodes represent customers, whereas rounded rectangles represent suppliers.

Semantic meanings can be assigned to line styles for connectors, and semantic colors can be assigned to both nodes and connectors.

Guidelines

In applications, embed the network graph only within components that use the whole canvas area, such as the tab container on the object page. Do not embed the network graph in smaller containers, such as panels, headers, tables, forms, and dialogs.

The network graph is not a substitute for a Process Flow. For more details, see the Usage section at the top of this article.

Keep the amount of information inside each node to a minimum. You can reveal more information via the details popover.

Resources

This page will help you choose the correct chart when you want to compare items that do not need to be displayed in a particular order.  This type of comparison is also called nominal comparison, category comparison, or structure analysis. These chart types can be used to compare items such as revenues in a list of products, or transaction volumes in a list of banks.

If the items you want to compare have an intrinsic order such as dates, age, or time periods, please see the Chart – Variation through Time page.

One Set of Values

If you want to compare items based on one type of value, we recommend using a bar chart as shown in the example below.

You can make it easy to compare items by ranking them in order of the largest value to the smallest value as illustrated below, or vice versa if you wish. Learn more about ranking on the Chart – Ranking page.

Why we recommend using a bar chart instead of a column chart

It’s worth noting that you can use a column chart or a bar chart, but if you use a bar chart you will avoid the undesirable effects that come as a result of displaying the category labels at 45°, making them hard to read and frequently leading to truncation of text.

Hierarchical Categories

Multiple Sets of Values

Compare Values Individually

We recommend using a bar chart to compare values within item categories. If one of the values acts as a point of reference, please refer to the section below on comparison with a point of reference.

The chart below compares the revenues of USA and Germany for nine product lines.

As previously stated, you can make it easy to compare items by ranking them in order of the largest value to the smallest value as illustrated below, or vice versa if you wish.

In the example below, the ranking allows us to clearly see that the top three products in USA are also the top three products in Germany.

Comparing with a Reference Point

Sometimes you might want to see how close a value is to reaching or exceeding a reference point. Typical examples of reference points are target, plan and budget. A benchmark or a value from the previous year can also be considered as reference points.

The chart below compares actual and planned costs for four lines of business.

Comparing Two Entire Sets of Values

If you need to compare two entire sets of values, we recommend using two bar charts side by side. You can order the items in one of the datasets in order to better highlight the differences between the two datasets.

In the example below, we can easily see that the margin for ‘Servers’ is much higher than other product lines that have a similar revenue.

If there are many items within categories, you could also use a scatter plot or a bubble chart which are designed to illustrate correlation between datasets.

Comparing Values that have Different Units

 If the values being compared have different units, you can either convert the values to a common unit such as the percentage, or you can use multiple charts side by side.

The example below displays two sets of values, the transaction volume and the transaction amount for four banks. With this type of visualization, it’s easy to spot that Bank C is the odd one out when comparing the bars.

What Not to do: Take a look at the chart below. It contains the same information as the two charts above, but with a dual axis. It looks like the Transaction Amounts for Bank C and Bank D are bigger than their Transaction Volumes, but this is meaningless because the axes use completely different scales.

Comparing Sum of Values (Stacked Bars)

The following section illustrates how to visualize the sum of values inside and across different category items using a stacked chart. In the example below the number of ‘imported successfully’ bank accounts are stacked on top of number of ‘imported with errors’ bank accounts. However, please notice that this approach does not make it easy to compare the number of ‘Imported with Errors’.

The chart below is used in the Analyze Sentiments app which enables product managers to view sentiment information for multiple products by analyzing the number of mentions in social media broken down by how positive, neutral and negative they were. You can see how the sum of the positive, negative and neutral mentions provides a good indication of the “buzz” around each product, independently of how good or bad it was.

If you want to see which products received the most mentions overall, as well as the most positive, negative, and neutral mentions, then an ideal solution would be to split this information into four separate charts. However, you need to make sure that the four charts use the same horizontal scale.

In the example below, you can easily see that the product line ‘PDAs & Organizers’ received a lot of mentions, although a large percentage of them were actually negative.

An alternative solution would be to use a table with bars inside each column.

Two Categories

You can use bar charts placed side by side if you want to compare values across two categories, such as revenue by products and by country. You do not need to repeat the list of category items on the vertical axis. However, you must make sure that all the charts use the same horizontal scale!

Please be aware that this layout only works well:

• for a limited number of charts (between 2 and 5),
• when vertical scrolling is not required,
• on large screens.

The chart below shows the revenue of each product line for three different countries. You can easily see that the revenue for ‘computer system accessories’ is exceptional high in Asia and you can easily compare values within each business area, although you cannot easily compare values between different business areas.

Two Categories Containing Many Items

You can use a heatmap if the categories you’re comparing contain many items, and you’re just interested in showing approximate values. The heatmap is a two-dimensional representation of data where values are represented just by color. The heatmap below visualises gross sales of products items by month.

In the example below, a heatmap is used by an IT department to visualize response times in ms throughout the weekdays and working hours using semantic colors to differentiate between response times.

If you have a lot of categories, be aware that the heatmap might not render correctly on small devices. This is because all content on the screen will be resized proportionally and the category labels may by hidden due to lack of space.

Three Categories

If you want to compare three categories such as product, region and quarter, we recommend displaying multiple charts in a matrix. All you need to do is make sure the charts all use the same scale.

Be aware that this layout only works well:

• with a limited number of charts,
• on large screens

The chart below shows the percentage deviation of actual revenue versus target revenue, by country and product line, for the last four quarters. It’s immediately obvious that the first quarters have frequently fallen below target, and that ‘graphic cards’ did not perform well in all the countries.

Resources

This article describes how value labels are displayed and how to customize them.

Default Value Display

By default, values of the data points are automatically displayed close to the data point, so that the user does not have to select each point to check its value.

As a general rule:

• Values never overlap.
• Text can be truncated.
• Numeric values are never truncated.

Columns

Values are displayed above the bar.

Stacked Columns

Values are displayed within each bar.

If the height of the bar is too small so that the bar cannot hold the value itself (bar height < text height), the text is hidden.

Bars

Values are displayed on the right side of the bars.

Stacked Bars

Values are displayed within each bar.

If the width of the bar is too small so that the bar cannot hold the value itself (bar width < text width), the value is hidden.

Custom Value Display

If there are too many data points, it is possible to hide all values or to hide some values.

Hide Values for a Series (Combined Chart)

When combining a line with bars, avoid displaying values for both series unless you are sure that both series will not overlap. Instead, please only show values for the most important series.

Hide Values of a Series (Clustered Bars)

In clustered bars, when a series is not the key focus of the chart, it may be better to hide its values.

Hide Values for a Series (Multiple Lines)

When multiple lines are displayed in a chart, avoid displaying values for all the lines. This leads to cluttered information. Instead, please show only values for the most important line.

Hide Values for Categories

If the focus of the chart is on one specific category and its comparison with other categories, it may be better to hide all the values except the key category.

Hide Values Based on Condition (Min, Max)

It is also possible to highlight the first and last values of a series, or the minimum and maximum value of a series.

Formatting Values

Quantity Formatters

When values use quantity formatters such as short format or percentage, always display the formatters in the data point. For example, display 30M or 12% in the data point.

When appropriate, also show the formatters in the vertical or horizontal axis. For example, the vertical axis will display 10%, 20%, 30%…10%.

Locale

Be locale aware: Display numbers in the format corresponding to the user’s locale settings. For that purpose, use SAPUI5 number formatters.

Resources

Intro

You can add reference lines to highlight certain values. Reference lines can be added to continuous axes, but not to categorical axes.

Single Reference Line

Multiple Reference Lines

Colors

Simple Reference Lines

Semantic Reference Lines

Resources

This article explains how to visualize the relationship between two or three sets of numerical values, and how these values relate to each other.

Scatter charts and bubble charts are the most frequently used charts to visualize a correlation, although using a line chart or bar chart side-by-side is also an acceptable solution.

Two Datasets

The scatter plot is the most efficient chart to show the correlation between two sets of numerical values. The chart below illustrates the correlation between age and income.

You can also group all the data points in ranges and display one average value per range, as illustrated below.

Few Items

When you have a small number of items, you can display the datasets in two sets of bars. This allows you to display the item name just once. Both sets of bars should be sorted by the first set or the second set to make the relationship easily visible by comparing the two shapes.

In the chart below, we can easily see that there is a direct correlation between Revenue and Margin, although ‘Servers’ is an outlier.

Three Datasets

You can use a bubble chart to show the correlation between three sets of numerical values. One set can be displayed in the horizontal axis, another set can be displayed in the vertical axis, and the third set can be represented by the size of the bubbles.

It’s difficult to precisely compare the size of bubbles. Therefore, it’s better to only use the Bubble chart when you want people to grasp a rough approximation of the values represented by the size of the bubbles.

The bubble chart below shows how the probability of the sales opportunty relates to the estimated close date and the expected revenue which is represented by the size of the bubble. In this context, the sales opportunity bubble usually begins in the bottom right quadrant, and moves to the top left quadrant of the chart over time.

Resources

This page provides all the color names in the chart palettes.

Use Names – Do not use HEX values!

Colors are defined by names in order to support our theming capabilities. They are derived from themeable base colors and then the associated HEX values depend on the current theme.

You cannot change the HEX values unless you create a new theme.

Qualitative Palette

Color Name	Example: Belize (light flavor)
sapUiChartPaletteQualitativeHue1		#5899DA
sapUiChartPaletteQualitativeHue2		#E8743B
sapUiChartPaletteQualitativeHue3		#19A979
sapUiChartPaletteQualitativeHue4		#ED4A7B
sapUiChartPaletteQualitativeHue5		#945ECF
sapUiChartPaletteQualitativeHue6		#13A4B4
sapUiChartPaletteQualitativeHue7		#525DF4
sapUiChartPaletteQualitativeHue8		#BF399E
sapUiChartPaletteQualitativeHue9		#6C8893
sapUiChartPaletteQualitativeHue10		#EE6868
sapUiChartPaletteQualitativeHue11		#2F6497

Semantic Palette

Color Name	Example: Belize (light flavor)
sapUiChartPaletteSemanticBadLight3		#f99494
sapUiChartPaletteSemanticBadLight2		#f66364
sapUiChartPaletteSemanticBadLight1		#f33334
sapUiChartPaletteSemanticBad		#dc0d0e
sapUiChartPaletteSemanticBadDark1		#b90c0d
sapUiChartPaletteSemanticBadDark2		#930a0a
sapUiChartPaletteSemanticCriticalLight3		#f8cc8c
sapUiChartPaletteSemanticCriticalLight2		#f5b04d
sapUiChartPaletteSemanticCriticalLight1		#f29b1d
sapUiChartPaletteSemanticCritical		#de890d
sapUiChartPaletteSemanticCriticalDark1		#c67a0c
sapUiChartPaletteSemanticCriticalDark2		#a4650a
sapUiChartPaletteSemanticGoodLight3		#a1dbb1
sapUiChartPaletteSemanticGoodLight2		#71c989
sapUiChartPaletteSemanticGoodLight1		#4cba6b
sapUiChartPaletteSemanticGood		#3fa45b
sapUiChartPaletteSemanticGoodDark1		#358a4d
sapUiChartPaletteSemanticGoodDark2		#2a6d3c
sapUiChartPaletteSemanticNeutralLight3		#d5dadc
sapUiChartPaletteSemanticNeutralLight2		#bac1c4
sapUiChartPaletteSemanticNeutralLight1		#9ea8ad
sapUiChartPaletteSemanticNeutral		#848f94
sapUiChartPaletteSemanticNeutralDark1		#69767c
sapUiChartPaletteSemanticNeutralDark2		#596468

Sequential Palette

Color Name	Example: Belize (light flavor)
sapUiChartPaletteSequentialHue1Light3		#b2d4f5
sapUiChartPaletteSequentialHue1Light2		#93bfeb
sapUiChartPaletteSequentialHue1Light1		#74abe2
sapUiChartPaletteSequentialHue1		#5899DA
sapUiChartPaletteSequentialHue1Dark1		#367dc4
sapUiChartPaletteSequentialHue1Dark2		#1866b4
sapUiChartPaletteSequentialHue2Light3		#fcc3a7
sapUiChartPaletteSequentialHue2Light2		#f5aa85
sapUiChartPaletteSequentialHue2Light1		#ef8d5d
sapUiChartPaletteSequentialHue2		#E8743B
sapUiChartPaletteSequentialHue2Dark1		#da5a1b
sapUiChartPaletteSequentialHue2Dark2		#cc4300
sapUiChartPaletteSequentialHue3Light3		#8fd1bb
sapUiChartPaletteSequentialHue3Light2		#66c2a3
sapUiChartPaletteSequentialHue3Light1		#3fb68e
sapUiChartPaletteSequentialHue3		#19A979
sapUiChartPaletteSequentialHue3Dark1		#0e8c62
sapUiChartPaletteSequentialHue3Dark2		#03734d
sapUiChartPaletteSequentialNeutralLight3		#d5dadc
sapUiChartPaletteSequentialNeutralLight2		#bac1c4
sapUiChartPaletteSequentialNeutralLight1		#9ea8ad
sapUiChartPaletteSequentialNeutral		#848f94
sapUiChartPaletteSequentialNeutralDark1		#69767c
sapUiChartPaletteSequentialNeutralDark2		#596468

Resources

This article illustrates the different ways you can visualize changes of measures over time. The exact type of chart depends on the type of change you want to visualize and the number of time periods.

Time Category and Time Axis

By convention, time is represented horizontally from left to right which means it’s best to use the horizontal axis to represent the time in chart visualizations. We recommend using the time axis which has three main advantages:

• It allows you to display dates and times in a responsive manner.
• All the complexity involved with formatting the axis labels is automatically taken care of.
• The physical spacing between the data points accurately respects the time scale, as opposed to just displaying them equidistantly.

Additional Categories

In addition to the time category, there are additional categories that contain an intrinsic order and that that carry the notion of progression or trend.

For example, age, time period, or a rating.

As such, the rest of this article also applies to these categories.

Column or Line Chart?

• Use a line chart if you want to emphasize the trend over time.
• Use a column chart if you want to emphasize the values themselves.

In the figure below, you can see that the trend of the values immediately stands out in the line chart, while we need to make an effort to visualize the trend of the values in the column chart. At the same time, the values can be compared more easily in the column chart.

One Set of Values

Illustrating the Trend

As previously stated, the line chart is the best way to illustrate a trend over time.

Sometimes it’s difficult to see the global trend when the values vary a lot. In these circumstances you can display a moving average in the same chart as illustrated below. You can see the three month moving average of the total demand of ice cream displayed as a black line. Please note that you should avoid using a straight line to represent the global trend because the inclination depends too much on the start date and end date and is therefore misleading.

Combining Trends: Actual, Plan, Budget and Target

This section describes how to visualize the trend of values while comparing them with reference values such as plan, budget or target. The bullet chart below displays actual and target values for four years.

Trend of Deviation

If you want to show how the deviation between two measures evolves through the time, please refer to the deviation article (see: time deviation).

Multiple Rates of Change

If you want to compare the rate of change of two measures over time, you can use percentages to express the rate of change and start from the initial date of the series. The chart below represents the rate of change of ice cream and the rate of change of pizza displayed in percentage from the original date.

Part to Whole 

Check out the part to whole article.

Resources

This article explains how to use patterns like dashes, dots or hatches in order to distinguish:

• Actual Values: What values are (solid pattern).
• Projected Values: What values might be (dashed line, hatched areas).
• Reference Values: What values should be (dotted line with empty circles, empty areas).

Actual Values

Actual values register facts that happened in the past and utilize the solid pattern for areas and lines, as illustrated below.

Projected Values

Projected values are estimates of what might happen in the future such as a forecast, estimation or prediction. They indicate what the actual values will be in the future, and the projection can be calculated by the system, extrapolated from previous time periods, or entered manually by a user.

Example:

• Revenue forecast calculated from previous months.
• Adjusted revenue forecast that has been manually adjusted based on the current context.
• Cost for projects that are committed, but not yet delivered.

Dashed Line

Use dashed lines to show projected values as illustrated below.

A line can change from solid to dashed when the line needs to display actual values followed by projected values. In the example below, the line connecting the last actual value (2015) to the first projected value (2016) is dashed to indicate that the line is a projection.

Hatched Area

Use the hatched pattern in columns and bars to display projected values, as illustrated below.

A series of columns with the solid pattern can be followed by a series of columns with the hatched pattern when a series displays actual values followed by projected values, as illustrated below.

Reference Values

Some values represent a reference for other values (such as a threshold that should be reached or should not be reached) depending on the use case. Here are some examples:

• A target revenue that must be reached.
• An expense budget that should not be exceeded.
• The share price of a competitor to use as a benchmark.
• The number of new customers acquired last year that needs to be exceeded this year.

The bullet chart is the ideal chart to compare values with reference values. The reference value is displayed by the black horizontal lines as illustrated in the chart below.

Dotted Line and Empty Circle

Reference values displayed as a line should use a dotted line and empty circles for the data points as illustrated below.

When there are many data points, the circles are automatically hidden, as illustrated below.

When the chart contains one actual value and one reference value (such as a target), you should use color sapUiChartPaletteSequentialNeutralDark2 for the reference line and the first color from the qualitative palette for the actual value, as illustrated below.

When the chart combines a single reference value (such as a target) with multiple actual values, you should use color sapUiChartPaletteSequentialNeutralDark2 for the reference line and colors from the qualitative palette for the actual values, as illustrated below.

When the reference values and the actual values do not have a direct relationship, you should use colors from the qualitative palette and all the lines should all have different colors, as illustrated below.

Empty Area

When columns or bars are used to display reference values (such as a target, plan or budget), you should use the empty pattern.  You should also use the color sapUiChartPaletteSequentialNeutralDark2 for the reference value and the first color from the qualitative palette for the actual value as illustrated below.

When the chart contains a reference value (like a target) for multiple actual values, you should use color sapUiChartPaletteSequentialNeutralDark2 for the reference value and colors from the qualitative palette for the actual values, as illustrated below.

When multiple reference values and multiple actual values do not have a direct relationship, you should use colors from the qualitative palette.  Columns for the reference values and columns for the actual values should all have different colors, as illustrated below.

Resources

Ranking

Rank items from highest to lowest, or vice versa.
For example: Rank countries by market share.

For more information, see ranking.

Comparison

Compare values of items in a list that has no particular order.
For example: Compare revenues in a list of products, or transaction volumes in a list of banks.

For more information, see comparison.

Variation Over Time

Show the variation of values though time.
For example: Show the stock level over time, or expenses by month compared to budget.

For more information, see variation through time.

Part to Whole

Display contribution of individual values to the whole.
For example: Show the percentage of sales attributed to various regions.

For more information, see part to whole.

Deviation

Show the deviation, difference, or gap between two sets of values.
For example: Show the deviation between actual revenue and target revenue by product.

For more information, see deviation.

Distribution

Show distribution within a set of values.
For example: Show how exam scores are spread or grouped around the median score.

For more information, see distribution.

Correlation

Show correlation between two or three sets of values.
For example: Show how sales revenues are impacted by customer age.

For more information, see correlation.

Cumulation

Show the accumulation of successive values.
For example: Show cumulation of stock day by day, or cumulation of revenues and cost for profit and loss.

For more information, see cumulation.

Geographical Values

Use a map to show the values associated with geographical areas.
For example: Show revenues by country on a map.

For more information, see maps.

Recources

The range selector is a user interface control that enables the user to select a range of data points in a dataset. The control gives a visual preview of the dataset in the form of a chart.

Usage

Use the range selector if:

• You have a large dataset and want to focus on a certain range of data points.
• The dataset is combined with a chart above (preferable).
• You intend to use the same chart visualization in the control and above it.
• You are using a column chart or line chart.

Do not use the range selector if:

• It is for decoration only.
• You have a small dataset.
• You intend to use different chart visualizations in the control and above it.
• You want to use the range selector instead of a chart.
• You are using chart types other than a column chart or line chart.

Responsiveness

Behavior and Interaction

Changing Values

Moving the Entire Range

Users can move the entire selected range by dragging it. When you hover over the selected range, the cursor changes to indicate that the range can be dragged.

Positioning and Overlapping

The grips of the range selector cannot be positioned on the same value. The grips cannot overlap.

Properties

• You can use the vizType property to choose the type of chart that will be displayed in the range selector. The supported charts are column chart and line chart.
• You can use the width and height properties to set the size of the range selector. On a mobile device, the range selector has a maximum height of 7.5 rem.
• You can use the valueAxisVisible property to show or hide the value axis.
• You can use showStartEndLabel to set a start and end label for the range selector.

Resources

The goal of the radial chart is to display a single percentage value. It is displayed with a colored radial bar and a percentage value.

Usage

The radial micro chart can be embedded into a table, list, tile, or header.

Responsiveness

See the Micro Chart overview article.

Resources

Want to dive deeper? Follow the links below to find out more about related controls, the SAPUI5 implementation, and the visual design.

This article explains how to visualize the deviation (difference or variance) between two measures, such as the difference between the product revenue streams over two years, or the difference between actual expenses and target expenses for different cost centers.

The first two sections address deviations within a non-time category. The last two sections are dedicated to time-category.

All figures that represent a deviation should include a + or – sign. They can appear in the value axis, close to the data points in the plot area, and in popovers.

Deviation Only

This section explains how to visualize the deviation (difference) between two measures, and only the deviation. The chart below shows the difference between the actual cost and budgeted cost for multiple cost centers.

Deviation in Percentage

It’s a good idea to consider whether the actual value can be given as a percentage when displaying a deviation. The chart below displays the same information as the chart above, but the deviation is expressed in percentage.

If the order is not important, you can also rank items to make the values easy to compare, as illustrated below.

Deviation and Measures

Sometimes you may want to display two measures and the variance (deviation) between them.

The best way to achieve this is by displaying two charts side-by-side: a bullet chart to display the two measures, and a bar chart to display the deviation. Placing the variance (deviation) in a separate chart makes it easy to compare the variance.

The chart below displays the variance between actual expenses and planned expenses for different cost centers and the deviation between them.

For the same reason mentioned above, you should consider displaying the deviation in percentages as illustrated below:

Time Deviation Only

This section explains how to show the deviation over time between two measures, and only the deviation. If you want to show the measures as well, please proceed to the the next section called ‘Time Deviation and Measures’.

Focus on Value

You can use a column chart when the value of the variance is more important than the trend of the variance.

Focus on Trend

Use a line chart if you want to focus on the trend of the variation, as illustrated below.

Sometimes, it’s better to see the deviation as a percentage. In these circumstances, choose one measure as the reference and express the deviation as a percentage of the reference. The chart below contains the same information as the chart above, but with the variation expressed in percentage. You can now see that the deviation in March and June were very high.

Time Deviation and Measures

If you want to display two measures and the deviation in the same visualization, you can use two charts one above the other. And, if the trend of the measures and the variation is important, or if there are many data points, you can use two line charts as illustrated below.

When the value of the variance is more important than the trend of the variance, you can use a bullet chart and a column chart side by side. The chart below displays actual and target values over time, as well as the deviation for each time period.

Resources

This article explains how to use charts to visualize the different parts of a whole (expressed as a percentage).

Example use case: The regional sales revenue contribution shown in comparison to the total sales revenue of a company.

Bar Charts

When designers think about visualising parts of a whole, they are invariably drawn toward the trusty pie chart. However, in many cases simple bars are in fact a far better option because you can:

• Compare parts to each other.
• Display category labels and value labels associated with each part.
• Display multiple values.
• Display small values in a better way.
• Avoid having to use multiple colors and a corresponding legend.

 

 

The first chart in this example below represents the cash position by currency.

If the order of the category items is not important, you should rank the items from the biggest value to the lowest value as illustrated below. This makes it easy to compare items and see the highest values and smallest values.

Pie Charts

The pie chart (donut chart) is best used when there are only two or three slices to display, and when it’s not important to immediately have the exact value of each slice. Note that the values are ranked from the largest to the smallest to make reading and comparison easier, although you can use a different order if it’s important in the context of your application.

Pie charts are great to use if you’re primarily interested in seeing how much the largest values compare to the rest in percentage. In the chart below, a company has ten stores, but we are most interested in seeing how much percentage the three biggest stores represent. The rest of the stores have been grouped under a slice called ‘Other’. You can easily see that the first three stores represent approximatively 75-80%.

Variations Over Time

If you want to show how a part to whole evolves over time, you can use a line chart, multiple bar charts, or stacked columns. Generally speaking, the line chart is the best solution where you can use one line for each part of the whole as illustrated below.

When there are a small number of time periods (between 2 and 4), you can use bar charts side by side as illustrated below. In this example, the chart represents the contribution of six product lines to the total revenue of a company over a period of four years. Because the first chart is ranked by percentage, you can easily identify when the shape of the different parts changes over time. You can see the contribution made by ‘Flat Screen TVs’ has increased over the last two years compared to the other product lines.

If there are only two parts in the whole, you can use a stacked column as illustrated below. Here the evolution of each part is immediately visible.

If there are more than two parts in the whole, the first and last values are easy to compare. However, it’s hard to grasp the evolution of parts that exist between the first and last parts. In the chart below the ‘neutral mentions’ are less important so it’s acceptable not to be able to compare them very easily, and only have a rough approximation of their evolution.

Comparison

If you want to compare the composition of a whole between few items, use bar charts side by side. The chart below illustrates the contribution that five product lines make to the total revenue of three sales regions. Note that the first sales region is ranked by percentage, which makes easy to compare the shape of each chart.

Stacked bars work well when you have only two parts. The chart below is used in the Cash Management app and displays the import status of bank statements for some banks expressed in percentages.

If there is no reason to display the items in a specific order, you can rank by one of the measures. The chart below contains the same information as the chart above, except now the banks have been ranked according to the successful import rate.

If there are more than two parts in the whole, the first and last values are easy to compare. However, it’s hard to grasp the evolution of parts that exist between the first and last parts.

The chart below displays the revenue contribution made by three sales regions of each for five product lines. In the context of the application, the ‘Asia’ sales region is less important so it’s acceptable not to be able to compare the values very easily, and only have a rough approximation of their evolution. The American sales region is also the most important, so it is displayed first in order to rank the product lines.

If you want to know which items have the biggest values and how many of these items contribute to the total of the values, you can use a Pareto chart which is designed to illustrate the well-known 80%/20% rule. That is, 20% of the items contribute to 80% of the total.

The chart below displays the number of defects by type of defect, and we can see that 80% of the defects come from the first four types of defect.

Resources

The bullet chart is used to compare primary and secondary (comparison) values.

Encoded Values

Primary Values

Frequently used for actual values, primary values can also be used for any type of value that you want to compare to the secondary/comparison value.

Secondary/Comparison Values

Frequently used for target and plan values, comparison values can also be used to compare the primary value with any other value. There are use cases where the comparison value is used to express a forecast, a competitor, or a specific year.

Additional Values

The bullet chart can also express an additional value so long as it’s directly related to the primary value.

Orientation

The bullet chart can be orientated horizontally or vertically. It’s best to orientate it vertically for time series.

Color Palette

If nothing is customised, the bullet chart will automatically use colors from the qualitative palette.

However, it is also possible to customize the colors (for example, if you want to differentiate between categories). For more information, check out the article on bullet chart colors.

Selection and Popover

Unlike other charts, when the user clicks on a bullet, all the associated values are displayed in the popover – primary value, comparison value along with additional value, projected value, and qualitative ranges (if used). The popover can also be customized to display other information and actions if you wish.

Legend

As with all other charts, when you customize the colors, the text of each legend item must also be manually maintained because the chart component cannot guess the meaning of each color.

For more information, see legend.

Resources

The legend explains the meaning of all the visual elements contained in the plot area.

Layout

You can decide where you want to legend to be positioned. By default, it is displayed to the right of the plot area, but it can also be displayed below it when the chart scrolls horizontally. However, we recommend displaying to the right of the plot area when you have many legend items.

Responsiveness

When the legend is displayed to the right of the plot area, it automatically moves to the bottom when the horizontal space is reduced as illustrated below.

Behavior and Interaction

Show/Hide Legend

The legend can be hidden or shown via a dedicated standard button in the chart toolbar (not a toggle button). The visibility of the legend changes each time the button is pressed.

Select Legend Item

Clicking a legend item selects or deselects all the associated data points. It does not show or hide them, although this functionality is in the roadmap for this control.

Custom Legend Items

By default, the chart component displays a legend based on the dataset and the colors used by the chart. All colors displayed in the chart are listed in the legend.

By default, the order of the legend item is the same as the order used to render the dataset, although the order and labels of legend items can be customized.

Order

The order of the legend items can be customized to help users read it. In the example below, the default order does not respect the chronological order (which makes the legend difficult to read). Changing the order helps users recognize the information better.

Text

It is not possible to customize the legend labels when colors are automatically assigned by the chart component. When the colors are set programmatically (such as by using value-based colors), it’s possible to customize the legend items in order to clearly describe the meaning of the color.

Titles

By default, the legend does not display a title, although a title can be displayed manually on top of the legend. However, we recommend only displaying a title if doing so will help users understand the legend items or make the legend item labels shorter.

Resources

The time axis is compatible with a number of charts and is designed to show the variation of values through time. It can display years, quarters, months, weeks, days, hours, minutes, and seconds.

The time axis incorporates three valuable features:

1. All the complexity involved with formatting the labels – including localization – is taken care of automatically
2. The time unit labels behave responsively according to the zoom factor. As you can see below, the time unit labels in the top row change as the zoom increases, while the time unit label in the row below is only displayed once to prevent unnecessary repetition.

3. For certain chart types, the physical spacing between your data points accurately respects the time scale being displayed, as opposed to just rendering all your data points equidistantly. We can see what a difference this makes by comparing the charts below. The chart to the left uses the categorical axis and the chart to the right uses the time axis. Even though both charts were generated from exactly the same dataset; they tell completely different stories with respect to how the values have increased over time due to the high concentration of early data points.

Compatible Chart Types

A number of SAP Fiori charts can accommodate the time axis, such as the bubble chart, scatter chart, line chart, column chart, and more.

You can find the full list of charts that can accommodate the time axis in the chart types article.

Customization

Choosing Which Time Units are Displayed

By default, the time axis displays day, month, year. However, you can display different time units to suit your dataset using one of 18 recommended combinations:

• Second, minute, hour
• Second, minute, hour, day, month
• Second, minute, hour, day, month, year
• Minute, hour
• Minute, hour, day, month
• Minute, hour, day, month, year
• Day, month
• Day, month, quarter
• Day, month, year
• Week, year
• Week
• Month, year
• Month, quarter, year
• Month, quarter
• Month
• Quarter, year
• Quarter
• Year

Any other custom combinations will likely lead to undesirable results.

Define the Layout of Your Time Unit Labels

By default, your time unit labels will be displayed in one or two rows depending on the zoom factor that is applied to the time axis at any given time. You will notice below that the time unit labels are not repeated in the bottom row so there is no unnecessary repetition of time unit labels.

It is technically possible to force the labels so that they are displayed in just one row as illustrated below, although this will only work in a satisfactory way for two time unit combinations: “year, month” and “quarter, year”.

If your chart is going to be displayed in a small space, you can choose to display the first date and the last date in your dataset as illustrated below.

Formatting the Time Units

By default, the date unit labels follow SAP UI5 medium date formats which localizes the order of the time unit labels e.g. “7 Aug, 2016” (British) or “Aug 7, 2016” (American). However, three combinations will always be displayed in the same order: “year, quarter”, “year, week” and “quarter, week”. This is because these combinations are not supported by CLDR (Common Local Data Repository) localization standards.

You can use any of the other formats available in SAPUI5 such as “August”, “A” and “08”. However, due to the responsive behavior of the time axis, the zoom factor will affect the way that your time units are displayed.  Therefore, you must create and register a format for all potential permutations. For example; if you want to display ‘year, month, day’ you need to create and register separate formats for “year, month, day”, “month, day” and “year”.

Defining the Initial View

By default, the time axis will render your chart from your first data point, with a scrollbar if necessary. However, you can decide which data points (or a specific time period) is initially displayed.

Managing Null or Missing Values in a Line Chart

If there are going to be null or missing values in your dataset, you can connect the available data points, or create a clear break between them.

Resources

This page will help you choose the correct chart for ranking items based on numeric values. This is useful for identifying category items with the largest or smallest values.

By Category

We recommend using a bar chart to display a list of category items sorted by value (for example, a product ranking by revenue).

In the chart below, it is easy to:

• Understand that the category items are sorted by values.
• Identify the top-ranking countries and the lowest-ranking countries.
• See that all the countries in the middle have values that are very close together.

If you’re also interested in seeing how the values are distributed among category items, you can display a reference line that indicates the median.

Bar Chart vs. Column Chart

It’s worth noting that you can use a column chart or a bar chart, but if the category is not time-based (or does not have an intrinsic order), we recommend using a bar chart. If you follow this advice, you will avoid the undesirable effects that come as a result of displaying the category labels at 45°, which as well as making them hard to read, also often leads to truncation of text. See the example below with the truncated ‘Great Britain’ label.

Within a Hierarchy

You can rank items within groups of the hierarchy.

In the example below, the countries are ranked inside their respective continents which makes it easy to compare each continent and each country within each continent.

Flat Hierarchy

When the hierarchy does not contain many items, you can flatten it and use color to identify the first level of the hierarchy.

In the chart below, you can immediately grasp which top 3 countries have the highest values and that America has the smallest values.

The chart below is used in the Cash Management app and displays the liquidity forecast by outcome and income. Displaying the outcome and income seperately helps to identify which income and outcome are the biggest.

Ranking and Parts to Whole

If you want to know which items have the biggest values and how much of these items contribute to the total of the values, you can use a Pareto chart which is designed to illustrate the well-known 80%/20% rule (that is, 20% of the items contribute to 80% of the total).

The chart below displays the number of defects by type of defect, and we can see that 80% of the defects come from the first four types of defect.

Resources

Micro charts help you visualize a small number of data points in a small, non-interactive way. They can be embedded in tiles, SAP Smart Business drilldowns, and any SAPUI5 container (such as SAPUI5 tables).

Usage

Use the micro chart if:

• You want to provide tracking at a glance.
• You want to display changes in the data in an easy and condensed way.

Do not use the micro chart if:

• You are looking for interactive analytics. Use the analytical card instead.
• You want to display extensive data.

Responsiveness

All micro charts are fully responsive.

Types

The following micro charts are currently available:

Area Micro Chart

Bullet Micro Chart

Column Micro Chart

Comparison Micro Chart

Delta Micro Chart

Harvey Ball Micro Chart

Line Micro Chart

Radial Micro Chart

Stacked Bar Micro Chart

Behavior and Interaction

Clicking/Tapping (Optional)

The charts include one interaction: a click event that can be switched on or off.

Resources

Want to dive deeper? Follow the links below to find out more about related controls, the SAPUI5 implementation, and the visual design.

Use the sap.viz.ui5.controls.VizFrame control to display different types of charts. The VizFrame control can display charts containing large sets of values in an interactively rich and responsive way, or it can display charts containing a small amount of data with no interaction.

You can put the VizFrame control inside the ChartContainer SAPUI5 control. This enables you to place a toolbar above the chart which gives users the ability to switch between a chart view and a table view, as well as switch to full screen mode.

Guidelines

Resources

This article explains what the three chart visualization color palettes are designed to do and how you can leverage their unique properties.

Palette Overview

For color names and HEX values, see palette colors – values and names.

Rules

1. Only use colors contained in the SAP Fiori chart palettes
   You should only use colors from the SAP Fiori color palettes to ensure that we maintain visual design consistency across all charts used in all SAP Fiori applications.
2. Only use one palette per chart
   Do not combine colors from different palettes in the same chart. Each palette has been carefully designed to serve a distinct purpose.
3. Ensure color names are referenced in the code – not HEX values!
   Colors are defined by names in order to support our theming capabilities. This means that the HEX values of the colors may not be exactly the same in past, present and future SAP Fiori visual design themes. This flexibility is made possible by the fact that the color names will stay the same across all past, present and future SAP Fiori visual design themes. You can get the color names and corresponding HEX values from the article on color palettes – values and names.
4. Do not use color to distinguish between forecast, actual and target values
   Use sematic patterns instead.

Default Colors

By default, every chart type comes with built-in colors that are applied automatically, based on your dataset. Here are three examples:

Changing the Colors

There are three ways to change the colors in charts:

Qualitative Palette

Highlight Category Items

By default all the categories will use the first color from the qualitative palette. However, you can use other colors from the qualitative palette if you want to highlight category items.

Group Items by Color

You can use the qualitative palette to group items into categories. In this example, we use green for Europe, blue for America, and orange for Asia.

Semantic Palette

Here are some ways you can use the palette:

Illustrate the Top Three Values

This column chart uses the semantic palette to display sales revenue per month. The color green is used to highlight the top three months with the highest revenue.

Show Positive and Negative Series

These stacked bars represent the availability of materials. The available series is green, the inspection series is orange, and the blocked series is red.

Denote Good or Bad Values

Each data point has a color based on its value. Data points are now red if their value is below a certain threshold, green if their value is above another threshold, and orange if their value is between the two.

Visualize Different Levels

In this geomap, green is used to indicate states with good performance, and red is used to indicate states with bad performance. In this example the different shades express different levels of good and bad performance.

Default Color Shade Names

Selecting the Correct Combination of Shades (Semantic Palette)

The semantic palette contains six shades of each color so you can express up to six levels of each semantic. Therefore, it’s important to select the correct combination of shades according to the number of levels you want to express. The table below shows you how to do this for bad – the same principle can be applied to good and critical.

Number of Levels

Shades to Use

Color Names

One Level

sapUiChartPaletteSemanticBad

Two Levels

sapUiChartPaletteSemanticBadLight2
sapUiChartPaletteSemanticBad

Three Levels

sapUiChartPaletteSemanticBadLight2
sapUiChartPaletteSemanticBad
sapUiChartPaletteSemanticBadDark2

Four Levels

sapUiChartPaletteSemanticBadLight2
sapUiChartPaletteSemanticBadLight1
sapUiChartPaletteSemanticBad
sapUiChartPaletteSemanticBadDark1

Five Levels

sapUiChartPaletteSemanticBadLight2
sapUiChartPaletteSemanticBadLight1
sapUiChartPaletteSemanticBad
sapUiChartPaletteSemanticBadDark1
sapUiChartPaletteSemanticBadDark2

Six Levels

sapUiChartPaletteSemanticBadLight3
sapUiChartPaletteSemanticBadLight2
sapUiChartPaletteSemanticBadLight1
sapUiChartPaletteSemanticBad
sapUiChartPaletteSemanticBadDark1
sapUiChartPaletteSemanticBadDark2

Sequential Palette

Here are some ways you can use the palette:

Distinguish between Past and Present

These two series use different shades of the same color to distinguish between last year and the current year.

Show Time Gradation

These stacked bars represent payable aging by country. The different gradations of brightness are used to represent different time periods.

Visualize Different Levels

This bullet chart shows direct costs in a dark shade and indirect costs in a light shade.

This geomap contains two measures. Shades of blue are used to visualize high and low values for one measure while shades of orange are used to visualize high and low values for the other measure.

Ranked Values

In this bubble chart, the size of the bubbles represents future sales deals. The probability of converting these deals is expressed using different shades of blue.

Selecting the Correct Combination of Shades (Sequential Palette)

The sequential palette contains six shades of each color so you can express up to six different values per measure. Therefore, it’s important to select the correct combination of shades according to the number of values you need to express. The table below shows how to do this for the blue category item color – the same principle can be applied to the other colors in the palette.

Number of Values

Shades to Use

Color Names

One Value

sapUiChartPaletteSequentialHue1

Two Values

sapUiChartPaletteSequentialHue1Light2
sapUiChartPaletteSequentialHue1

Three Values

sapUiChartPaletteSequentialHue1Light2
sapUiChartPaletteSequentialHue1
sapUiChartPaletteSequentialHue1Dark2

Four Values

sapUiChartPaletteSequentialHue1Light2
sapUiChartPaletteSequentialHue1Light1
sapUiChartPaletteSequentialHue1
sapUiChartPaletteSequentialHue1Dark1

Five Values

sapUiChartPaletteSequentialHue1Light2
sapUiChartPaletteSequentialHue1Light1
sapUiChartPaletteSequentialHue1
sapUiChartPaletteSequentialHue1Dark1
sapUiChartPaletteSequentialHue1Dark2

Six Values

sapUiChartPaletteSequentialHue1Light3
sapUiChartPaletteSequentialHue1Light2
sapUiChartPaletteSequentialHue1Light1
sapUiChartPaletteSequentialHue1
sapUiChartPaletteSequentialHue1Dark1
sapUiChartPaletteSequentialHue1Dark2

Resources

The smart chart is a wrapper around existing chart types, and can be used together with all existing chart types within VizFrame. The main purpose of the smart chart is to reduce development effort. However, this comes at the expense of decreased flexibility. The smart chart creates visualization based on the underlying OData service and the corresponding annotations. It also adds some generic functionality, such as a toolbar, complex personalization settings, variant management, breadcrumb, tooltip, drilldown and zoom capabilities. Everything that can be done using the smart chart can also be achieved using the standard VizFrame Chart, but with more development effort.

Usage

Use the smart chart if:

• Data is fed through OData services.
• You need to reduce development effort.
• You would like to profit from drilldown and detailed information support.

Do not use the smart chart if:

• You create your own UI coding, and the data is not fed through OData services. In this case, use the VizFrame chart instead.

Responsiveness

Layout

Behavior and Interaction

Selection

Data points can be selected by clicking or dragging. Both single selection and multiple selection are possible. Data points, labels, and legend items can be selected. Clicking into the background deselects all data points. For more information, see Chart – Selection.

Details

Guidelines

Semantic Colors

To display chart measures, the smart chart uses semantic coloring based on the UI.DataPoint annotation.

Semantic Patterns

Resources

The user can select one or more data points. They are generally selected to display related information about the respective points or to trigger actions that relate to them. There are several ways in which the user can select items.

Default Selection

The charts provide three types of selections:

No Selection

In this mode, data points cannot be selected individually and therefore no actions can be triggered from a data point.

• When the user clicks a data point, nothing happens.
• When a user with a mouse device hovers the pointer over a data point, nothing happens.

Single Selection

Multiselection

This is the default mode.

In multiselection mode, the user clicks a data point to add it to the selection.

Clicking a blank area deselects all selected data points.

Shortcut for Multiselection

The following actions are shortcuts for selecting multiple data points:

• Click a category label: All associated data points are selected.
• Click a legend item: All associated data points are selected.
• Rubber-band-like lasso selection: All data points within the lasso are selected.

Selection by API

The way in which data points are selected when they are clicked can also be changed through the vizSelection (aPoints, oAction) API.

Example: Category Selection

You can implement category selection by using the vizSelection (aPoints, oAction) API. When the user clicks a data point, all data points in the same category are selected.

Example: Series Selection

You can implement series selection by using the vizSelection (aPoints, oAction) API. When the user clicks a data point, all data points in the same series are selected.

Deselection

Clicking a selected item deselects it again.

Clicking a blank area of the chart deselects all data points that are currently selected.

Appearance

Selected and non-selected items differ in terms of their appearance as follows:

• Selected items are highlighted by using a darker color.
• Non-selected items have a lighter color.

Resources

The smart chart is a wrapper around existing chart types, and can be used together with all existing chart types within VizFrame. The main purpose of the smart chart is to reduce development effort. However, this comes at the expense of decreased flexibility. The smart chart creates visualization based on the underlying OData service and the corresponding annotations. It also adds some generic functionality, such as a toolbar, complex personalization settings, variant management, breadcrumb, tooltip, drilldown and zoom capabilities. Everything that can be done using the smart chart can also be achieved using the standard VizFrame Chart, but with more development effort.

Usage

Use the smart chart if:

• Data is fed through OData services.
• You need to reduce development effort.
• You would like to profit from drilldown and detailed information support.

Do not use the smart chart if:

• You create your own UI coding, and the data is not fed through OData services. In this case, use the VizFrame chart instead.

Responsiveness

Layout

Behavior and Interaction

Selection

Data points can be selected by clicking or dragging. Both single selection and multiple selection are possible. Data points, labels, and legend items can be selected. Clicking into the background deselects all data points. For more information, see Chart – Selection.

Details

Guidelines

Semantic Colors

To display chart measures, the smart chart uses semantic coloring based on the UI.DataPoint annotation.

Semantic Patterns

Resources

The interactive line chart is a type of interactive chart used for visual-based filtering in the visual filter bar (VFB) within the analytical list page (ALP).

It allows the user filter large sets of data by time period. The user can see both the time period and the measure at the same time, where the period is always the horizontal (X) axis of the chart.

Usage

Use the interactive line chart if:

• You want to give the user the possibility to visually filter data in the analytical list page.
• You want the user to gain insights before filtering large datasets with the visual filter bar.
• You want to measure trends and changes over time when filtering.

Do not use the interactive line chart if:

• You want to visualize data without using it for filtering.
• You are not using the visual filter bar.
• You have scenarios that do not depict time periods.
• You want to visualize data for more complex scenarios. In this case, use the VizFrame chart instead.

Responsiveness

Layout

The interactive line chart consists of two mandatory areas – a filter label and an area containing the measure and visualization of the chart. The control itself doesn’t contain an axis title.

Filter Labels

The filter labels contain the filter criteria and are left-aligned. They may be truncated if not enough space is available. To avoid this, we highly recommend using the short format for time-related filter labels. For example:

• Year: 2017
• Half Year: H1, H2
• Months: Jan, Feb, Mar, Apr, May, Jun, Jul, Aug, Sep, Oct, Nov, Dec
• Quarters: Q1, Q2, Q3, Q4
• Week: W1-W52
• Weekdays: Mon, Tue, Wed, Thu, Fri, Sat, Sun
• Days: Jan 1, Jan 2 … Dec 31

Measure and Visualization

The interactive line chart can display percentage and actual values as a measure but never a mix of both at the same time. Always display measures using one decimal point. Measures should always be visible and never truncated.

The interactive line chart does not support coloring and the default color of the bars should not be customized.

Behavior and Interaction

Selecting and deselecting a section resembles toggle-like behavior. If the user clicks on a selected section, it becomes deselected and vice versa. By default, the interactive line chart supports multiple selection, allowing the user to select more than one filter value.

Guidelines

Use the interactive line chart in the visual filter bar if you would like to have a filter for the highest or lowest values of a filter dimension. For example, to filter for the highest or lowest margin, revenue, or cost related to a project.

In the visual filter bar, the interactive line chart only displays the last or first six data points (such as last six days, last six months, and so on).

In general:

• You should display the measure labels with one decimal point.
• Do not display an axis title.
• Do not display any scrollbars.

Resources

The analytical card is used for data visualization. It consist of two areas – a header area (either a standard header or a KPI header) and a chart area that displays a visual representation of the data. It is a single object card and does not contain a footer area. The analytical card can only be used in the overview page (OVP).

Responsiveness

The analytical card has a uniform horizontal width of either 20 or 25 rem, depending on the screen size. The vertical height is flexible. The VizFrame charts within the cards are fully responsive.

Header Area

There are two header types that could be used with the analytical card depending on the use case:

Types

There are eight chart types currently supported by the analytical card:

• Line
• Bubble
• Column
• Stacked column
• Vertical bullet
• Donut
• Combined
• Scatter plot

 

Line Chart

In general, the line chart is the most efficient chart for showing the evolution of a trend over a period of time. You can choose between two line types: linear (default), and spline interpolation.

• Avoid showing more than four lines in the same card.
• When showing more than one line in the chart, different units should not be displayed. All the lines should use the same unit, such as “Euro”.

Use the line chart if…

• You want to emphasize the evolution of a trend over a period of time.
• You want to visualize data that contains an intrinsic order, such as age, a range, or a rating (but excluding time). In this case, there is an idea of a progression or trend, and the best way to represent these values is to use the horizontal axis.

Note: For time series, we recommend using the time axis. See the section Guidelines (Time Axis) in this article for more information.

Do not use the line chart if…

• You want to emphasize the values themselves. Use a column chart instead.
• The data does not contain an intrinsic order.

Bubble Chart

A bubble chart displays the correlation between three sets of numerical values. One set is represented in the horizontal axis, another set is represented in the vertical axis, and the third set is encoded in the size of the bubbles.

We recommend showing only one or two series. Because series are represented by specific bubble colors, having too many series/colors can make the chart hard to read.

The sizes of the bubbles are determined by the values in the third data series. The measure that is represented by the bubble size is defined below the chart.

Color

• If the goal is to isolate outliers within a cloud of other bubbles, use the same color for all bubbles.
• If the goal is to group bubbles that have the same characteristic, use one color per group. Warning: Too many colors can make the chart hard to read.
• If the goal is to compare bubbles individually, then use one color per bubble. Only use this option if there are very few bubbles.

Use the bubble chart if…

• You need a rough approximation of the values encoded in the bubble size.
• You want to represent data with three dimensions on a 2D chart.
• You want to compare and show the relationships between labeled/categorized circles, by the use of positioning and proportions.
• You want to display the correlation between three sets of numerical values.

Do not use the bubble chart if…

• You need to represent information only with two dimensions.

Note: For time series, we recommend using the time axis. See the section Guidelines (Time Axis) in this article for more information.