Area Chart

An area chart is used to display data that depicts a time-series relationship. It involves plotting data points on x- and y-axes and connecting them with lines. Area charts are primarily used when the magnitude of the trend is to be communicated rather than individual data values. This chart is effective for emphasizing trends, often by filling the area under the lines with color or shading.

Area charts are preferred when you want to communicate the overall trend in your data rather than individual values. They are especially useful for representing multiple data series with part-to-whole relationships or cumulative data sets.

Creating an Area Chart

To create the Area chart

• Create a New Dashboard Panel
• Configure the Query and select the appropriate Data Source

(Refer to Dashboard Basics > Query)

Select Visualization

On the right side of the default screen, select Visualization as Time series to create an Area Chart panel.

Visualization Options

Panel Options

There are multiple options to edit the properties of the panel. The first one is Panel Options. Enter a Name and Description for the Panel that you want to create. For instance, if you're making an area chart to track CPU usage, name the panel "Area Chart" and describe it as "CPU Usage."

The Description is available in the top left corner and can be viewed by hovering over the i button.

The next part of Panel Options is Panel Link where you can point a link to any other website or dashboard of your choice. Enter a title, and URL, and select the ‘Open in a new Tab’ option if you want to open the link in a new tab. Click Save.

The URL can be a link to another dashboard or for getting help or useful info. When you click on a panel, it opens the link either in the same tab or a new tab, depending on your choices. For example, if you want to compare a default dashboard, just click the link to open it.

Tooltip

The next section is the Tooltip which is used to show the details of a panel.

There are 3 options to configure the Tooltip:

1. Tooltip mode
   • Single: Show the tooltip at a single point.
   • All: Show the tooltip at all points.
   • Hidden: The tooltip is not shown at any point.
2. Hover Proximity: Set the hover proximity (in pixels) to control how close the cursor must be to a data point to trigger the tooltip to display.
3. Max Width: Set the maximum width of the tooltip box.

As you can see, there is a green-colored tip showing wherever you click on the graph.

Legend

The next option is the "Legend," which essentially allows you to choose how you want the legend values to appear: at the bottom or on the right. The purpose of a legend is to provide a key or explanatory information for symbols, colors, or other elements used in a chart, map, diagram, or any visual representation

As for the Legend mode, you can display it in two ways:

• List: The legends are displayed as a list.
• Table: The legends are displayed as a table.

Placements

Set where on the visualization a legend is displayed. Choose from:

• Bottom
• Right

Width

If you set the legend placement to Right, the Width option becomes available. You can either leave the field empty to enable auto mode or manually enter a value to set the legend width.

Legend Values

You can select several values such as Last, First, Min, Max, Total, etc to show in the legend. The values are the specific properties of the data.

The corresponding properties of the data will be displayed as a legend in the graph.

Axis

The next option is the Axis from where you can configure all the axis settings of your graph.

The further options that you can configure in your axis settings are:

• Time Zone: Set the desired time zones to display along the x-axis.
• Placement: Choose Y-axis placement- Auto, Left, Right, and Hidden.
• Label: Set a Y-axis text label. Different labels for multiple Y-axes can be set using override.
• Width: Fix the axis width.
• Show Grid Lines: Auto, On, Off.
• Color: Set the color of the axis by choosing either Text, which uses the panel's text color, or Series, which uses the colors of the data series.
• Show Border: Set the axis border visibility
• Scale: Set the y-axis values scale. Choose from: Linear, Logarithmic, and Symlog.
• Centered Zero: Set the Y-axis so it is centered on zero
• Soft Min: Adjust Y-axis limits with a Soft Min.
• Soft Max: Adjust Y-axis limits with a Soft Max.

Graph Styles

Use this option to define how to display your time series data. You can use overrides to combine multiple styles in the same graph.

• Lines

• Bars

• Points

Line

Line interpolation

Choose how the graph connects data points:

• Linear : Points are joined by straight lines.
• Smooth : Curved lines for smoother transitions.
• Step before : Steps between points, with points at the step's end.
• Step after : Steps between points, with points at the step's start.

There are other options to configure such as:

• Line width: The width of the line.
• Fill opacity: The opacity of the filled region.
• Gradient mode: Specify the gradient fill color.
• Line style: Solid, dash, or dots.
• Connect null values: Choose how null values, which are gaps in the data, appear on the graph.
• Disconnect values: Choose whether to set a threshold above which values in the data should be disconnected.
• Show point: Show or hide point.
• Point size: Size of the points.
• Stack series: Stacking allows to display of series on top of each other.

Bars

Bar Alignment

Set the position of the bar relative to a data point. In the examples below, Show points is set to Always which makes it easier to see the difference this setting makes. The points do not change; the bars change in relationship to the points.

• BeforeThe bar is before the point, with the point at the trailing corner.
• CenterThe bar encircles the point, with the point in the center (default).
• AfterThe bar is after the point, with the point at the leading corner.

The secondary options for Bar Style Graph include:

• Bar width factor: Adjust the bar width relative to the minimum spacing between data points. A value of 0.5 means each bar occupies half of the available space, while a value of 1.0 means the bars fill the entire space between data points.
• Line width: The width of the line.
• Fill opacity: The opacity of the filled region.
• Gradient mode: Specify the gradient fill color.
• Line style: Solid, dash, or dots.
• Show point: Show or hide point.
• Point size: Size of the points.
• Stack series: Stacking allows to display of series on top of each other.

Points

As for the Points style, it only contains:

• Point size: Size of the points.
• Stack series: Stacking allows to display of series on top of each other.

Fine-tune your chart! Adjust tooltip modes, legend placement, and axis settings to make your area chart more interactive and informative. Try different legend layouts and axis options for the clearest view.

Standard Options

The Standard Options are used to configure the other standard settings in the graph. It changes the way the graph appears.

The further options include:

• Unit type: The type of Unit parameters.
• Min: Minimum value to be considered.
• Max: Maximum value to be considered.
• Decimal: Total digits after the decimal point.
• Display name: Series name to be displayed.
• Color scheme: choose a color scheme for the graph.
• No Value: What to show when there is no value.

Data Links

The Data Links option is similar to the Panel Link where you can link a URL and then open it in another tab. It is placed on the data instead of the Panel.

You can click on the data anywhere and the link option will appear. It provides an instant link that you want to appear anytime you click on the data.

Value Mappings

The Value Mappings option allows you to find a certain value and wherever the value lies, the display text is displayed. If there is a similar value in the data, it is highlighted in the form of the color selected.

Thresholds

The Thresholds option allows you to define and color-code value thresholds in three display modes:

• Not filled
• As lines
• As filled regions and lines

Set color-specific thresholds to visualize performance levels more effectively.

For instance, for CPU usage, use yellow for 80, and red for 110, enabling quick detection of threshold breaches and immediate action or error alerts.

Add Field Override

Use the Add field Override option to modify existing fields. Overrides enable changes to field settings, same as the field options available in a particular panel, with the flexibility to select the target fields.

To add a field override, click on the Add Field Override button.

Select the Field type

Select a field type, based on the following properties:

• Name: Set properties for a specific field with a name.
• Matching Regex: Set properties for fields with name matching a regex.
• Type: Set properties for a field of a specific type (number, string, boolean).
• Query: Set properties from the field for a specific query.
  1. Select the Field.
  2. Select the override property.
  3. Configure the override property.

You can add multiple fields overrides by repeating the same.

You have now learned how to configure the Area Chart, change the panel settings, and more. You can save and edit the panel later too.

You’re in control! With field overrides, you can customize how specific fields are displayed, ensuring your area chart is tailored to your audience’s needs.

FAQs

Why would I use an area chart?

An area chart is useful for visualizing trends over time, such as population growth.

• It is based on a line chart, but the filled area enhances trend visibility.
• Provides a clearer sense of data fluctuations.

Which chart type should I select to observe changes over time?

An area chart is ideal for tracking how a metric (e.g., population) changes over time.

How can I change my current chart (area) to a line chart or bar chart without creating a new chart?

• Navigate to the Graphs Style tab.
• Change the chart type to Line or Bar as per your requirement.

How do I change the color for the legends and set the selected color as a default color?

• Go to Standard Options.
• Choose a color scheme for your series.
• Save the visualization to retain the selected colors.

How do I change the position of the legend?

• Go to Axis settings.
• Change the legend position to Right, Left, Top, or Bottom.

Why does my area chart show no result or is not displayed?

Check the following factors:

• Global Time Selector: Ensure data exists for the selected time range.
• Metric: Verify that the selected metric field contains data.
• Group By: Ensure the bucketing field contains data.

How can I sort my Group By field in ascending or descending order if it’s not a time series field?

• In the Query tab, select your Group By field.
• Choose Terms, then in the Order section, select Top or Bottom.

How can I make my area chart interactive to allow users to explore the data more deeply?

• Enable tooltips, data links, and legend toggles.
• Use hover effects to highlight data points.
• Add clickable elements for navigation to detailed views or related dashboards.

Interactive features enhance user engagement and allow for deeper data exploration.