Skip to main content

Celonis Product Documentation

Visuals - Bars and Lines

The Chart component allows you to create different types of charts: bar charts, line charts, scatter plots, area charts, and more.

Every chart must contain one or more visuals which can be seen as layers of the chart that use different visual marks to represent data.

Basic Charts with one Visual

To create a basic chart with defaults, we only need to add one visual to the chart. We specify mark: bar to represent data items with bars.

If we specify mark: point the data items will be represented by circles as in a basic marker chart.

Of course, there are more types of mark such as line, text and area.

You can even configure additional options for some of the marks if you are not happy with the defaults.

For all configuration properties of a mark, please check out the main Chart page.

Making a basic Bar Chart

id: simple-bar-chart
type: chart
settings:
  name: Materials
  encodings:
    x: MATERIAL_CLASS
        y: COUNT
  visuals:
    - mark: bar  # use bars to represent data

Making a basic Marker Chart

id: simple-marker-chart
type: chart
settings:
  name: Materials
  encodings:
    x: MATERIAL_CLASS
        y: COUNT
  visuals:
    - mark: point  # use circles to represent data
41193728.png
41193729.png
Combining multiple Visuals

By creating and adding just one visual to a chart, you can make basic Bar Charts, Line Charts or Scatter Plots.

But often you may want to show more than just one type of mark in the same chart.

For that reason, we can add more than one visual to a chart and layer them on top of each other.

For example, I would like to show a little target indicator for each of the bars I created above.

For this I just add another visual to the chart with mark: point .

Making a "Target Chart" combining bars and markers

id: target-chart
type: chart
settings:
  name: Materials
  encodings:
    x: MATERIAL_CLASS
        y: COUNT
  visuals:
    - mark: bar
        - mark: point
          encodings:
                y: TARGET
41193731.png

Note the extra y-encoding on the second visual. By default, every visual uses the encodings defined at the top level.

However, you can also define different encodings on each visual. These will only be used by that visual.

So in this case, the circles are placed along the y axis according to the TARGET attribute while the bars still use the COUNT attribute.

You can combine as many visuals as you like in the same chart. So be creative!

Be also advised to consider the usability of the chart at the end:

Am I trying to put too much information into one chart?

Should I split the chart into two different charts?

What is easier to understand for the chart reader?