Charts
Learn about building and configuring charts in Mappica.
Creating Charts
Charts can be created by clicking Insert in the Toolbar and dragging a new chart onto the canvas. You can also click the chart icon in any empty section.
Click on any chart on the canvas to select it. Like other elements, charts are highlighted in blue under the Layers tab once they have been selected.
Once selected, a chart can be customized by selecting the Chart tab on the right of the page, where the following functionality is available:
Setup
In the Setup section, under the Chart tab, you can assign the following properties:
- The name will be used to reference it in the Layers tab and on the canvas.
- The top, right, bottom, and left Margin that will be added between the chart axes and the edge of the chart container.
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 Limit Tick Width, Limit Tick Characters, and Rotate Ticks to constrain the size of tick and label text.
- The Size Ratio of the chart container. Since the chart will always take up the available width inside its parent section, the size ratio effectively determines the chart's height.
- Optionally, the chart's Minimum Height and/or Maximum Height. If the height calculated by the size ratio is smaller than the Minimum Height or larger than the Maximum Height, then the Minimum Height or Maximum Height is used instead of the size ratio.
Chart Types
In the Chart Type section, you can select from the following options. Use the links to read documentation for each chart type.
Column and Bar Charts display data values using vertical or horizontal bars, with the length of each bar representing the magnitude of a value...
Stacked Columns and Bars layer multiple data series into individual bars to show both combined values and individual segments...
Grouped Columns and Bars arrange bars for multiple data series side by side to compare values across categories...
Line Charts connect data points as continuous lines to highlight trends or changes, with the horizontal axis often depicting a time horizon...
Area Charts are similar to line charts but fill the space below each line series and stacks them to show both combined values and individual segments...
Histograms take raw dataset values and group them into intervals that represent their frequency and show distribution patterns...
Arrow Plots use arrows to indicate direction and magnitude between two points or categories in the data...
Dot Plots represent individual data points as dots along an axis to display distributions or comparisons...
Scatter Plots take raw dataset values and represent them as individual points on a plot, revealing patterns, relationships, or outliers...
Pie and Donut Charts divide a circle into slices or rings to show proportions or percentages of a whole...
Connecting to Datasets
In the
Dataset section, you can select the
dataset for your chart element, which contains the data that you wish to display on the chart. In order to add a dataset to a chart element, you must first add a dataset to your project. 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. In most Mappica charts, you can select either Wide Data or Long Data, though in some charts only one option is available. 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. The exact fields that will need to be specified depend on the selected chart type and whether wide data or long data is selected. More detailed information is included in the pages for each chart type, linked to in the
Chart Types section.
Connecting to Filters
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 the Minimum and Maximum Range values of the axis are set to auto. For example, in the case below, a slider filter is connected to the same dataset field as the chart's vertical axis. As the user adjusts the slider, data points are added or removed from the chart, and the vertical axis shifts accordingly.
This visualization, based on National Park Service data, includes slider and checkbox filter elements, enabling dynamic control of the data displayed in the scatterplot.
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.
Connecting to Selectors
If you are building a chart 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.
In the example below, the selector element (formatted as checkboxes) displays the names of the dataset fields used as series fields by the connected area chart. By selecting or deselecting checkboxes, users can dynamically adjust which of these series are displayed.
This selector element (formatted as checkboxes) controls which of the series fields are displayed in the connected chart.
Sorting
You can choose how to sort the chart items under the Chart tab in the Sort section. Sorting options vary depending on the chart type. For detailed information, refer to the documentation for each chart type, accessible through the Chart Types section.
Axes
The Axes section of the Chart tab is available for all charts except for pie and donut charts.
In this section, you can configure how the Horizontal Axis and Vertical Axis are configured. Whichever of these two axes is used for the independent variable is listed first in the user interface. The exact configuration options available depend on the chart type and several other factors.
- Add Label: When enabled, label text appears adjacent to the axis. You can also align the label text.
- Use Discrete Scale: On arrow, dot, and scatter plots, choose whether the independent axis should be formatted using a discrete scale instead of the default continuous scale.
- Customize Range: Specify a custom minimum and maximum value for this chart axis. This option is available on axes used for a chart's dependent variable. On charts with bars, the minimum value should be less than or equal to 0 and the maximum value should be greater than or equal to 0. On histograms, the minimum value is set to 0 and cannot be changed.
- Set Axis Line Location: When enabled, this option lets you control the position of the axis line. Auto places the axis line at the bottom of the chart (in the case of the horizontal axis) or the left of the chart (in the case of the vertical axis). Zero aligns the axis to the zero value and Hidden removes the axis line entirely. If this option is turned off, the chart's independent axis line will be displayed in a default location and the dependent axis line will be hidden (Pro users can adjust these default settings in the Theme page).
- Customize Ticks: When enabled, you can control which tick values will be displayed on the axis. Values lets you specify exact tick values, which should be separated with commas. Choose Count to set an approximate number of ticks (this option is only available on axes displaying continuous data). Or choose Hidden to remove ticks from the axis.
If you choose to specify exact tick values, ensure that they don't overlap with one another on tablet and mobile viewports.
- Limit Tick Width: This is the maximum width, in pixels, applied to text on this axis. Leaving the tick width set to auto will result in tick text remaining on one line. Text wraps at spaces, so longer words will sometimes extend beyond the specified value. This option is only available on independent axes that use a text field.
- Limit Tick Characters: This feature allows you to set a maximum number of characters for tick labels. When enabled, longer labels will be truncated to fit the character limit, with ellipses displayed to indicate that the word has been truncated. You can specify a custom value or leave it at auto for default behavior. This option is only available on independent axes that use a text field.
- Add Pagination: Pagination can be enabled to split chart data into manageable pages. You can define the Results Per Page to control how many data points are displayed at once and select the Pagination Controls Position to choose which corner of the chart the navigation buttons should be placed in. Pagination controls remain hidden if the number of results is less than the specified results per page.
- Rotate Ticks: On horizontal axes, you can rotate tick labels to angles of 0°, 30°, 45°, 60°, or 90°. This can improve readability, especially when dealing with long or overlapping tick labels.
- Use Short Format: On the dependent axis, you can display axis tick values in a compact format, such as 1K for 1,000 or 1M for 1,000,000. This requires that the axis is using a number or currency field.
The following chart formatting option applies to both axes:
- Clip Chart: Restrict chart items such as bars and symbols from extending beyond the boundaries of the chart container, ensuring all items remain within the outermost values on both axes.
Colors
Color formatting, defined in the
Colors section under the
Chart tab, is specific to the selected
Chart Type and
Data Format.
For charts that use Wide Data format, separate colors can be assigned to each of the selected series.
For charts that use
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 category 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.
For certain chart types where using distinct color series is not essential, a Fixed color formatting option is available alongside the Variable formatting options described above. The option applies a single color to all chart elements and is supported for bar charts, column charts, arrow plots, and scatter plots.
Settings
A Settings section under the Chart tab is available for Line Charts, Area Charts, Dot Plots, Arrow Plots, Histograms, and Pie and Donut Charts. Settings options vary depending on the selected chart type; these options are listed on each individual chart page.
Bar Fields
In dot plots, it is possible to toggle on Add Bar Fields, which draws bars between a Start Field and an End Field. When this feature is enabled, you can also select a Bar Color, Bar Width, Bar Start Symbol, and Bar End Symbol.
Range Fields
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 associated 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 line 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:
Annotations
In the Annotations section under the Chart tab, you can add various helpful annotations to a chart. The options vary by chart type:
Display Bar Totals: In bar charts, column charts, grouped bar charts, and grouped column charts, display the value of each bar directly on the chart. By default, annotations appear inside the bars, but you can select Total Outside Bars to place them outside. Use the Hidden Annotation Values setting to hide annotations for bars with values within a specified range (e.g., for small bars where space is insufficient for text).
Add Data Point: In stacked bar and column charts, add a dot annotation to represent a calculated value based on all items in a stack. Choose the Data Point Operation to calculate the "Sum," "Average," or "Median" of the stack's values. Apply a color to the dot using the Data Point Color setting. To include the data point in a connected legend element, enter a custom label in the Legend Text field. If left blank, the data point will not appear in the legend.
Line and Area Chart Annotations: In line and area charts, annotations can be added 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:
- Add Text: Add text to the annotation using the Text field. Choose a Color for the text, and specify its position relative to the X and Y locations using the Text Position setting. Available positions include "Top," "Right," "Bottom," "Left," or the default "Center," which centers the text vertically and horizontally over the X and Y location.
- Add Line: Add a line annotation to your chart. Use the Direction setting to render either a "Horizontal" line, a "Vertical" line, or line in both directions ("Both"). Choose a Color for the line.
- Add Symbol: Add a symbol annotation to your chart. Select the symbol type from the Symbol dropdown, which includes options such as "Asterisk," "Circle," "Cross," "Diamond," "Hexagon," "Plus," "Square," "Star," "Times," and "Triangle." Customize the symbol’s Color and specify its Width in pixels.
Add Data Line: In histograms, add a dashed line annotation to represent a calculated value based on items in a histogram series. This appears in the same color as the histogram bars, so usually requires that the bar opacity is reduced from 100% (this can be done in the Colors section of the Chart tab). The data line is set up as follows:
- Data Line Operation: Choose the Data Line Operation to calculate the "Average" or "Median" of the histogram values.
- Legend Text: The dashed data line will automatically be included in any legend connected to the histogram. By default this text will include the histogram series name and the data operation in parentheses. It is possible to edit the text that appears after the series name using the Legend Text option.
- Show Value: Select "Always" or "Hover" to display a dot at the top of the dashed line with the average or median value above it. In "Hover" mode, the value only appears when hovering.
