Create a chart

  1. Open a Qlik Sense app sheet, start Edit mode, then drag and drop dygraphs from the Charts menu onto the sheet.
  2. Select the x-Axis Data Type and Data Series Source from the Input Data section in Graph Options.
  3. Set dimensions and measures.
  4. Configure the chart using Graph Options and/or Per-Series Options.

Default Interaction

A dygraphs chart is interactive by default.  Move the mouse pointer over the chart to highlight individual values.  Click and drag horizontally or vertically to zoom and Shift-click and drag to pan.  Restore the initial extent of the chart by double-clicking.

Try these controls here:

Graph Options

Most of the configuration settings for the dygraphs chart object are found in the Graph Options menu.  Here you can specify the type of input data and customize the look of the chart.

Settings in the Graph Options menu are applied globally, i.e. to all data series displayed in the dygraphs chart object.  Some of these properties may be overridden by settings applied to individual data series if Per-Series Options are enabled.  To apply settings to individual data series, the input data series source must be set to Measures.

The Graph Options menu consists of eight sections:

The options within each section are described below.

Graph Options Menu

Graph Options

Input Data

Input Data Options

Input Data Options

Input Data settings determine how values in the input dataset will be interpreted and plotted by the dygraphs library.  It is recommended to apply settings here first before further configuring a chart.

Values on the first dimension are interpreted as the x-values for the chart.  The names of the data series may be taken from a second dimension for normalized data or from multiple measures for data organized in flat tables.

  • x-Axis Data Type (Dimension 1) - The data type for values on the x-axis, provided by the first dimension.  This may be set to either Numeric or Date.  Date values must be supplied in a valid JavaScript date format. (default: Numeric)
  • Data Series Source - The source of data series to be displayed. (default: Dimension 2)
    When this is set to Dimension 2, a second dimension and one measure are required.  The second dimension provides the set of data series to be displayed and the measure provides values for the data series.

    When this is set to Measures, one dimension (x-axis values) and at least one measure are required.  Choose a measure for each individual data series and its values – a field or an expression may be used.  Set the label property of each measure to provide a name for the data series in the chart’s legend.  In this mode, per-series line display and properties settings may be applied to customize the appearance of each data series individually.

Data Line Display

Data Line Display Options

Data Line Display Options

Data Line Display options provide control over the manner in which data are plotted on the graph.

The Presentation dropdown menu offers alternatives to the line chart that is plotted by the dygraphs library by default.  Some of these chart types require specific settings for dimensions and measures, as noted below.

The toggle switches provide configuration options for displaying line charts.

  • Presentation - How to plot each data series on the chart.  This option may also be set on a per-series basis. (default: Line Chart)

  • Data Points - Draw a small dot at each data point in addition to the line that passes through.  This option may also be set on a per-series basis. (default: Off)

  • Connect Separated Data Points - If there are x-values for which a series is missing data, draw a continuous line for the series instead of showing gaps where values are missing. (default: Off)

  • Error Bars - When enabled, the Low Error Value and High Error Value expressions for a measure will be evaluated (see Per-Series Options).  If either Low Error Value or High Error Value is set, an error bar will be drawn for each point between this value and the series. If both Low Error Value and High Error Value are set, error bars will be drawn for each point between low and high, with the series itself going through the middle. (default: Off)

  • Fill Graph - Fill the area underneath each data series.  This option is not compatible with error bars.  This option may also be set on a per-series basis. (default: Off)

  • Stacked Graph - Stack series on top of one another rather than drawing them independently.  Series will be stacked from top to bottom in the same order that measures are arranged in the properties panel. (default: Off)

  • Step Plot - Display the graph as a step plot instead of a line plot.  This option may also be set on a per-series basis. (default: Off)

Data Line Properties

Data Line Properties Options

Data Line Properties Options

Data Line Properties options allow you to adjust the appearance of points and lines that are plotted on the chart.

  • Stroke Pattern - The pattern of the line to plot for each data series. (default: Solid Line)

  • Stroke Width - The width of the line connecting data points for each series. (float; default: 1.0)

  • Data Series Colors - List of colors for the data series.  If not specified, equally-spaced points around a color wheel are used.  A color may be listed in hexadecimal notation, rgb function notation or by keyword identifier (e.g. “#FF0000” or “rgb(255,0,0)” or “red” ).  Separate colors in the list with a comma.  If the Expression Editor is used to create the list, wrap the entire string in single quotation marks. (string; default: see description)

  • Point Size - The size of the dot to draw on each point, in pixels, when Data Points are turned on.  This also controls the size of dots for “isolated” points, with missing data on either side, which are drawn by default. (integer; default: 1)

  • Highlighted Point Size - The size of the dot drawn over highlighted points, in pixels. (integer; default: 3)

  • Stroke Border Width - The width of the border to draw around graph lines for data series, in pixels, to make crossing lines more easily distinguishable.  Useful for graphs with many lines. (float; default: null)

  • Stroke Border Color - The color of the border drawn around graph lines when Stroke Border Width is set. (string; default: white)

  • Line Smoothing - Draw smooth lines between points using Bézier curves.
    This option is not compatible with Error Bars, Data Points, Fill Graph or Stacked Graph.(float; default: null)

All Data Line Properties options may also be set on a per-series basis.

Labels

Labels Options

Labels Options

The Labels section provides content and styling options for all of the labels in the chart, excluding the legend.  Here you can set the title and font sizes for the graph and both the x and y axes.

  • Graph Title - Text to display above the chart, centered.  HTML character entities may be used in addition to plain text. (text; default: null)

  • Graph Title Font Size - Size of the font to use for the graph title, in pixels. (integer; default: 20)

  • x-Axis Title - Text to display below the chart’s x-axis.  HTML character entities may be used in addition to plain text. (text; default: null)

  • y-Axis Title - Text to display to the left of the chart’s primary/default y-axis.  HTML character entities may be used in addition to plain text. (text; default: null)

  • Secondary y-Axis Title - Text to display to the right of the chart’s secondary y-axis, when it is enabled.  HTML character entities may be used in addition to plain text. (text; default: null)

  • Axis Title Font Size - Size of the font to use for both the x-axis and y-axis titles, in pixels. (integer; default: 16)

  • Axis Label Font Size - Size of the font to use for both the x-axis and y-axis labels, in pixels. (integer; default: 14)

Legend

Legend Options

Legend Options

The positioning and styling of the chart legend may be adjusted with these settings.

  • Legend Display Style - Show/hide and position options for legend display. (default: Mouseover)

  • Legend Highlight Style - Style to use for highlighting text in the legend, for the data series closest to the mouse pointer when Highlight Closest Series is turned on.  This may be set to Border, Fill or Single Series. (default: Border)

  • Legend Font Size - Size of the font to use for the legend text, in pixels. (integer; default: 14)

  • Stacked Legend Items - Place legend items on separate lines. (default: Off)

Axes and Chart Area

Axes and Chart Area Options

Axes and Chart Area Options

This section provides settings for the appearance of the chart axes and area.  The initial horizontal and vertical ranges of the graph may be specified here as well.

  • x-Axis Gridlines - Display vertical gridlines under the chart. (default: On)

  • y-Axis Gridlines - Display horizontal gridlines under the chart for the primary/default y-axis. (default: On)

  • Secondary y-Axis Gridlines - Display horizontal gridlines under the chart for the secondary y-axis, when it is enabled.(default: Off)

  • Independent y-Axes Ticks - Set tick positions for y-axes independently when the secondary y-axis is enabled.  By default, ticks on the secondary y-axis are aligned to those of the primary y-axis. (default: Off)

  • x-Axis Padding - Amount of extra space around the x-axis value range to ensure points at the edges remain visible, in pixels. (float; default: 0)

  • y-Axis Padding - Amount of extra space around the y-axis value range to ensure points at the edges remain visible, in pixels. (float; default: null)

  • x-Axis Range (low/earliest, high/latest) - Explicitly set the initial horizontal range of the graph to a low and high value.
    If the x-axis data consists of dates, use a date string format (e.g. “2015/08/26”) for these values.  Enter numbers if the x-axis data type is numeric.  Separate the two values with a comma. (array; default: full range of input)

  • y-Axis Range (low, high) - Explicitly set the vertical range of the graph to a low and high value.  Separate the two values with a comma.  If either limit is unspecified, it will be calculated automatically (e.g. [null, 30] to automatically calculate just the lower bound). (array; default: full range of input)

Value Display

Value Display Options

Value Display Options

This section provides formatting options for values displayed on the chart axes and in the legend.

  • Digits Before Decimal - Number of digits to display before the decimal point.  Numbers with more digits to the left of the decimal than this value will be displayed in scientific notation. (integer; default: 6)

  • Max Digits After Decimal - Maximum number of digits to display after the decimal point (trailing zeros are not displayed).  If a number has absolute value less than 0.1 to the power of this value, it will be displayed in scientific notation. (integer; default: null)

  • Fixed Digits After Decimal - Number of digits to display after the decimal point for y-axis labels and values displayed on mouseover. (integer; default: null)

  • Significant Digits (Scientific Mode) - Fixed number of significant figures to display, in scientific notation.  By default, numbers are displayed with a fixed number of digits after the decimal point. (integer; default: null)

  • Show K/M/B for thousands/millions/billions (base 10) on y-axis - Base 10 abbreviations for y-axis labels. (default: Off)

  • Show K/M/G for kilo/Mega/Giga (base 2) on y-axis - Base 2 abbreviations for y-axis labels. (default: Off)

  • UTC Date/Time Labels - Show date/time labels according to UTC instead of local time. (default: Off)

  • Ticker and Label Format (x-axis) - Specify how tick marks and labels will be generated and displayed on the x-axis.  When set to Auto, tick marks and labels will be set automatically according to the input data.  When set to any of the 1:1 date options, one tick mark and label will be generated per value in the x-value range.  This is particularly useful for bar charts when it is desirable to display one label per bar.  However, labels will be crowded if the dataset consists of more than ten or so values, since a label is generated for each x-value.  For larger datasets, this can be mitigated by setting the x-Axis Range to include a small subset of values and enabling Fixed Zoom.  Turn on UTC Date/Time Labels to correct for timezone offsets if labels display incorrect values (e.g. when input dates include only the year and timezone offset is negative). (default: Auto)

Interactive Elements

Interactive Elements Options

Interactive Elements Options

These options allow adjustments to be made to the default interaction model and chart behaviour.

  • Highlight Closest Series - When set, the data series closest to the mouse pointer will be highlighted.  Highlighted series will be rendered with thicker lines and larger data points while other series will be rendered with partial transparency. (default: Off)

  • Range Selector - Enable the range selector widget.  This disables the default click-drag zoom interaction. (default: Off)

  • Zoom Animation - Animate transitions between zoom windows when interacting with the chart. (default: Off)

  • Fixed Zoom - Keep the zoom level fixed to the initial horizontal extent of the chart and disable zooming.  Click-drag will pan instead. (default: Off)

  • Pan Edge Limit - A value representing the farthest a graph may be panned, relative to the display.  For example, a value of 0.1 means that the graph can only be panned up to 10% beyond the edges of the displayed values. (float; default: no bounds)

Per-Series Options

Per-Series Options Menu

Per-Series Options

Per-Series Options allow you to configure display properties of each plotted data series individually.  These options may be applied only when Data Series Source is set to Measures, with the exception of Low Error Value and High Error Value, as noted below.  Per-series options are found in the properties section for each measure that is set.