Line charts use continuous lines to connect data points, making them ideal for visualizing trends, changes, or relationships over time or across sequential categories. Each line represents a series of data values plotted against an independent variable, which is typically a date field. This structure allows line charts to highlight patterns, fluctuations, and progressions across multiple data series simultaneously.
In the Setup section, under the Chart tab, you can assign the following properties:
Because the margin sets the space between the chart axes and the edge of the container, ensure you add enough margin for any axis ticks or labels. If needed, use options in the Axes section such as Rotate Ticks to constrain the size of tick and label text.
In the Dataset section, you can select the dataset for your chart. If you need to add a dataset, this can be done by selecting New Dataset in the Project tab.
If you are on the Pro plan, you can upload your own files (in csv format) to use as datasets, by clicking New Dataset and then Upload Dataset.
After you have selected a dataset, you can optionally enable the Prefilter Dataset switch, which lets you filter the data that is supplied to the chart. The filter is a "prefilter" because it is applied before the visualization is generated; end users are unable to adjust the filter dynamically.
Next, the Data Format is displayed. You can select either Wide Data or Long Data. The data format should reflect the structure of the selected dataset. It also determines the fields that will need to be set for the chart.
Finally, choose the Fields that should be used to construct the chart:
You can establish connections to filter elements under the Chart tab, in the Connections section, by making a selection under Filter.
A Filter element can be styled as a series of checkboxes, a dropdown menu, or a slider. Values from the specified Filter Field appear as individual checkboxes, dropdown menu items, or (for numeric filtering) slider values. A given chart can be connected to one or more filters, and the same filter can be connected to multiple charts or other elements.
When a filter element is connected to a chart, it dynamically controls the dataset records displayed in the chart based on the user's selections. Filters can also adjust the chart's axis range dynamically, provided one of the chart's axis fields is the same as the filter's Filter Field and the Minimum and Maximum Range values of that axis are set to auto.
Additionally, filter elements can inherit color formatting from a chart, provided that the chart is using Long Data format and the chart's Color Field is the same as the filter's Filter Field. For more information, see the Color Formatting section of the documentation for filter elements.
If your chart uses Wide Data format, use a Selector element instead of a filter to dynamically control the chart color series.
Typically, the Filter element you connect to will use the same Dataset as the chart element. However, this is not strictly necessary. If the filter and chart elements use different datasets, the filter will only affect the chart if the chart's dataset contains a field (column) with the same name as the Filter Field in the filter element. In this case, the values in these fields must at least partially align for the filter to take effect. Any non-matching values between the fields will be ignored during filtering.
If you are using Wide Data format, you can establish a connection to a selector element under the Chart tab, in the Connections section, by making a selection under Selector.
Selector elements control which series fields are displayed in connected elements that use a wide data format. Selectors can be displayed as checkboxes, dropdowns, or legends. While a chart can be connected to only one selector, a single selector can be connected to multiple charts and other elements that use series fields. Once connected, the selector element dynamically controls the dataset fields (columns) passed to the chart as series fields based on user selections.
You can choose whether to reverse the chart's horizontal axis under the Chart tab in the Sort section.
The Axes section of the Chart tab can be used to configure the Horizontal Axis and Vertical Axis respectively.
If you choose to specify exact tick values, ensure that they don't overlap with one another on tablet and mobile viewports.
The following chart formatting option applies to both axes:
Color formatting is defined in the Colors section under the Chart tab.
If the chart uses Wide Data format, separate colors can be assigned to each of the selected line series.
If the chart uses Long Data format, you can specify a Color Field, which can be a text field or numeric (number, currency, percent, or measurement) field from the selected dataset. If you select a text field, each unique value in that field will be treated as a series and can be assigned a color. For numeric fields, you can configure a Color Gradient, Domain Minimum and Maximum, and Color Scale. These features are explored in greater detail in our Colors page.
In the Settings section under the Chart tab, specify the following options:
Curve: Choose how to interpolate the lines between points using various curve functions:
The curve types available in Mappica can be tested below.
Add Filled Area: Select this option to add a shaded area beneath each line series. The shaded area will take the same color as the line. You have the option to change the Opacity of the filled area from the default value, 10.
Remove Line Gaps: Select this option to displays continuous lines and connect data points even when a data value is missing. By default, gaps appear where an independent value is specified for a line but the dependent value in the dataset is empty.
Add End Dot: This option appends a dot symbol to the end of each line.
Show End Labels: This option displays labels at the end of each line, containing the series name. This option often works well in tandem with an end dot.
When using Show End Labels, ensure sufficient right margin is added to the line chart to display all series names.
Customize Each Line: When toggled on, you have the option to choose a Line Marker (symbol placed on each data point) and Line Style (thickness and pattern such as solid, dashes, or dots) for each line in the chart. When this option is toggled off, you can choose a marker and style to apply to all lines in the chart at once.
In line charts, it is possible to toggle on Add Range Fields, which draws ranges between two points (a "High value" and a "Low value") and associates each range with a line series on the chart. This is typically used to add visual context to the variability or uncertainty associated with a particular data series, through statistical measures such as confidence intervals and prediction intervals.
The range field is always assigned the color of the line series that it is associated with. You can choose the Opacity of the shaded ranges on the chart (with the default set to 30%).
If the chart uses Wide Data format, you will need to specify separate dataset fields (columns) for the high and low range values for each line series. For example, assuming series "A" and "B" are added as lines in the dataset, you will need to select columns "A High" and "A Low" and associate them with series "A"; you will then need to select columns "B High" and "B Low" and associate them with series "B". The data in the corresponding dataset will be structured as follows:
Date | A | A High | A Low | B | B High | B Low |
|---|---|---|---|---|---|---|
| 1990 | 100 | 105 | 95 | 40 | 45 | 35 |
| 2000 | 120 | 125 | 115 | 50 | 55 | 45 |
If the chart uses Long Data format, you only need to specify one high column and one low column for all series. Then confirm the line series that should be assigned a range. The data in the corresponding dataset will be structured as follows:
Date | Series | Value | High | Low |
|---|---|---|---|---|
| 1990 | A | 100 | 105 | 95 |
| 2000 | A | 120 | 125 | 115 |
| 1990 | B | 40 | 45 | 35 |
| 2000 | B | 50 | 55 | 45 |
In the Annotations section under the Chart tab, you can create annotations by clicking the Add Annotation button. The position of each annotation is specified with the "X Location" and "Y Location" fields. If the chart's horizontal axis uses a date field, you can specify the X location in YYYY/MM/DD or YYYY format.
The following items can be added to each annotation:
Tooltips can be enabled by selecting the Chart tab, navigating to the Tooltip section, and selecting Display Tooltip. These are automatically configured to display the fields selected in the chart.