Skip to main content

Line Chart

A line chart displays numeric column values as dots connected by lines on an X/Y coordinate system, typically to visualize changes to values over time.

Line chart Line chart

Data Requirements​

The line chart is available if the query results contain at least 2 columns, with at least 1 of them being numerical. The values of each numerical column can be used as Y axis values to be plotted as a line. For example, a query result such as

labelvalue1value2
a15
b52
c37

produces the following line chart with the label column values for the X axis and the value1 and value2 column as Y axis values for two lines.

image-500 image-500

Interactive Features​

Tooltips​

When hovering the cursor over a line chart, a tooltip for the value nearest to the cursor is shown.

image-500 image-500

Configuration​

The following visual configuration options are available for the line chart and apply to all plotted lines:

Line chart config Line chart config

  • S, M, L, XL: Preset size options for the axis labels and tooltips.
  • Line, Area, Step, Dot: Line visualization options. Area also highlights the area below the line, Step renders the line with discrete steps and Dot removes the connections between the data points (which admittedly makes it no longer a line chart).
  • Sparkline: Renders all lines as sparklines, i.e. removing the coordinate system.
  • Smooth Line: Whether to connect the data points with curved or straight lines.
  • Tilt X Axis: Whether X axis labels should be tilted by 45 degrees, which can be especially useful for longer labels.
  • Legend: Whether a legend should be displayed next to the chart, which can be a visual aid when plotting multiple lines.
  • Tooltip: Enables or disables tooltips when the cursor hovers over the chart.
  • Bullets: Whether the data points on the line should be visualized as small bullets.

Columns​

The column configuration for a line chart determines which columns are used for the X and Y axis of the chart. Only one column (which does not need to be numerical) can be used for the X axis, whereas any number of numerical columns can be used as Y axis values.

image-300 image-300

By default, all columns used for the Y axis are interpreted as values on a single Y axis. If there are two or more columns used with the Y axis, one of them can be configured to use a secondary Y axis, which is useful if the magnitudes of the values are on a different scale (or unit).

X Axis Options​

The following options are available for configuring the X axis:

image-300 image-300

  • Axis title: Whether the axis should have a title, which defaults to the column name. A custom title can be entered when the option is enabled.
  • Automatic Date axis: If the column values are date/time values, this option is available and enabled by default. If enabled, Cluvio tries create an evenly distributed time line, even if there are gaps in the data points.
  • Connect over gaps in data: If Automatic Date axis is enabled, this option is available and can be used to connect gaps in the data points.
  • Line Width: Configures the thickness of the lines.

Y Axis Options​

The following options are available for configuring the primary and secondary (if present) Y axis:

image-300 image-300

  • Axis title: Whether the axis should have a title, which defaults to the column name. A custom title can be entered when the option is enabled.
  • Logarithmic: Whether the values on the Y axis scale should be interpreted as being logarithmic rather than linear (the default).
  • Zero-based: Whether the scale should start at 0, rather than at the value of the smallest data point.
  • Money: If the data points represent monetary values, this option can be enabled (and a currency chosen) to include currency symbols on the Y axis labels.
  • Round: Enables rounding of values to a desired precision, if the values are not integers.
  • Percents: If the data points represent percentages, this option can be enabled to include %-signs on the Y axis labels.
  • Min, Max: Configures fixed minimum and maximum values for the axis.
  • Invert axis: Inverts the axis and as such the plotted line.

Additional Options​

The following additional options are available for a line chart:

  • Tooltip for single value only: If multiple Y value columns and thus multiple lines are plotted and tooltips are enabled, the default behavior is to show tooltips for all Y values simultaneously that have the same X coordinate. If this option is enabled, only the tooltip of the data point that is closest to the cursor is shown instead.

Legend​

If a legend is enabled, its position and maximum length of the labels can be configured.

image-300 image-300

Labels​

As an alternative or in addition to tooltips, the option Show value labels can be enabled to show either the X or Y value of a data points directly on the chart at the desired position.

image-300 image-300

Colors​

The Colors section of the chart configuration can be used to customize the colors for each column used as a Y axis, i.e. for every line. When the color is set to Automatic (indicated by a grayed-out A), a color is selected from the dashboard color scheme automatically.

image-150 image-150

Drill-down​

A drill-down can be configured for the line chart, so that when clicking on a data point a filter value is applied on the same or a different dashboard.

image-300 image-300

Use Navigate to to select the target dashboard of the drill-down action. If the target dashboard is not the same dashboard that the line chart is on, the UI navigates to the chosen dashboard.

In the Apply filters section, select one or more filters from the target dashboard and for each a column whose value should be applied to it when the user performs the drill-down.