Skip to main content

Bar, Line, and Area chart

A bar, line, or area chart is the best way to visualize data progression over time or to compare different values grouped by a common category.

The charts configuration contains 2 tabs:

  • Data → The settings to build and display the chart.
  • Styles → Color settings and additional information.
info

☝ Note that depending on the setting you modify, the chart will take a few seconds to update, and other changes are immediately applied.

Data tab​

Dimension and measures​

There are 2 sections for each axis, 1. Measures, the numbers to display and 2. Dimensions, the data to group those numbers like dates. Measures manage numbers to allow aggregations like sum or count and multiple series.

Options​

  1. Data → (Mandatory) The values that will appear in the chart. The options available depend on the columns from the block connected to the visualization block. Each axis requires selecting at least one.
  2. Aggregations → (Optional) Transform the values selected in the Data input with the options: sum, count, count distinct, average, max, and min. Only available in inputs that require numeric data. Learn how it works here. [LINK]
  3. Settings → Show or hide the settings options to format the data and show related information.
  4. Remove series → Delete one of the given numeric series, only available when there are multiple ones.
  5. Add series → Add another series to the chart. Useful to show multiple pieces of information in the same chart.
  6. Swap axes → Change the data from one axis to the other one. Basically, switch the chart's orientation from vertical to horizontal or vice-versa.

Settings​

Quick settings

  1. Sorting → (Optional) Order the values displayed by ascendant (lower to higher value) or descendant (higher to a lower value). Charts only support one series with sorting active.
  2. Group by → (Optional) Split the numeric series values by another column to get more granular results. For example, you can count the number of events and then group by event_type to get the total events by type instead one single value.
  3. Chart type → (Optional) Allow switching the visualization of a given series between line, bar, or area chart. Helpful when adding multiple series to visualize each one in a different mode. This setting works independently of the visualization type selected at the top to provide more flexibility.
info

🔗 You can check the Transformations in charts page to learn more about aggregations, grouping, sorting and more options.

Series labels

  1. Axis position → Determine the position of the series label on the chart and the scale of the values. For example, we have two series, A with an average on their value of 10000 and B with 10. We put both series on the left side of the chart, B will appear very small because the scale on that side depends on the bigger one (10000 vs 10).
  2. Stack series → Change the visualization of the series to show the different values on top of each other, forming one single column. This applies when the series has the “Group by” setting active, so the data has been split.
  3. Title → Change the default name to another custom.

Style tab​

Color​

  1. Color theme → The color palette that applies to your charts. Different options are adapted for colorblindness, like Latitude, Bright, Peace, or Pastel themes.
  2. Apply decal pattern → Add a visual pattern in addition to the color to help people with color blindness easily differentiate them.

Additional information​

  1. Show dots → Display a circle in the point of each data group.
  2. Show legend → Display a box with the color and name of the data groups displayed.
  3. Show values → Display the values of the points of each data group directly on the chart instead of when hovering only.
  4. Show data zoom → Display a control to zoom in on a specific range. Works only for the dimension axis, what you are measuring or what you're measuring by, like dates.

Axis Format​

  1. Stack between series → Change the visualization of the series to show them one on top of each other, forming one single column.
  2. Show title on axis → Display the title on the axis or not.
  3. Show marks on axis → Display the labels to measure the values or not.
  4. Title → The name that the series will display on tooltips and axis.
  5. Labels rotation → The orientation in degrees of the marks. For example, 45 degrees help not overlap values in some cases.
  6. Scale → Determine the visual way in which numeric data is displayed. There are 2 options: Linear, which has no transformation, and Logarithmic, which helps to show a wide range of data to detect very different values easily.
info

☝ Now that your chart is ready learn how to create a specific page to share it with colleagues or externally.