> ## Documentation Index
> Fetch the complete documentation index at: https://docs.chronosphere.io/llms.txt
> Use this file to discover all available pages before exploring further.
# Visualize time series with charts
[Classic dashboards](/observe/dashboards/classic-dashboards) have their own panels
and methods of configuring them. For details about panels in classic dashboards,
see [Classic dashboard panels](/observe/dashboards/classic-dashboards/classic-panels).
A *time series chart* visualizes time series data returned by a
[query](/investigate/querying). The chart depicts each returned time series as either
a line or bar chart representing each data point or interval, with time depicted
along the X axis and values along the Y axis. Time series charts are the default
panel type when creating new panels in Chronosphere Observability Platform.
Use time series charts to analyze trends and patterns in data over spans of time.
For example, you can render time series data about a service's resource consumption
to identify points in time where unexpected demand exhausted capacity and reduced
the service's performance or availability.
When combined with other charts in a [dashboard](/observe/dashboards), you can focus
on that point in time and correlate the event with other time series visualizations.
To create a time series chart or learn more about the configuration options common
to all panels, see [Panels](/observe/dashboards/panels).
## Use a time series chart's tooltip
When you hold the pointer over a time series's line or bar, Observability Platform
displays a tooltip that includes the date and time where the cursor is pointing. The
tooltip also displays the value of that series at that point in time. If multiple
series are under the cursor, Observability Platform displays the values for each
series. Moving the cursor along the series updates the values in the tooltip to the
new point in time.
To configure which series Observability Platform includes in the tooltip, see
[Modify a time series chart's tooltip](#modify-a-time-series-charts-tooltip).
In time series bar charts, certain data points display a time value such as `2h` to
indicate the step size.
### Pin a point in time
To pin the tooltip to a specific point in time, click the chart. The tooltip remains
visible until you click **Unpin ** inside
the tooltip. Next to any time series, click the
three vertical dots icon to open an action menu.
Click one of the following menu items to perform the selected action filtered to the
selected time series:
* ** View in full screen** to open the graph in an
overlay window.
* ** Analyze anomaly** to open
[Metrics DDx](/investigate/analyze/differential-diagnosis/metrics).
* ** View similar logs** to open
[Logs Explorer](/investigate/querying/query-logs).
* ** View similar traces** to open [Trace Explorer](/investigate/querying/traces).
#### Add an annotation
You can add an annotation when a specific time is pinned. To do so:
1. [Pin](#pin-a-point-in-time) a data point.
2. In the tooltip box, click **+ Create annotation event**.
3. Add **Event Details**.
* **Title**: The event title.
* **Timestamp**: By default, this field is pre-populated with the pinned time.
Event creation is limited to either 24 hours in the past or 24 hours into the
future from the current time.
* **Category**: The event's category. Select from the drop down list.
* **Source**: Select an event source from the drop down list.
* **Type**: Select the event type from the drop down list.
4. Add **Event Labels**. Event labels consist of **Key** and **Value** pairs. Select
a **Key** from its drop down list and then select a **Value**. For example, a
default pair is includes the **Key** `user_email` and the **Value** field
populates with the signed in user's email address.
5. To add additional labels, click **+ Add Label**.
6. To delete a label, click the trash can.
7. When finished, click **Add Event**.
#### View or edit annotation details
If an annotation exists, you can view and change details.
To view annotation details:
1. Click the annotation.
2. In the tooltip, click **View annotation details**.
3. In the **Annotation** drawer, details about the annotation display.
To edit the annotation:
1. View the annotation details.
2. In the **Annotation** drawer, click **Edit**.
3. Update the annotation.
4. Click **Save**.
## Time series chart queries
Time series charts use one or more
[queries](/observe/dashboards/panels#change-a-panels-query) to retrieve data to
visualize.
Time series charts use the following query **Options** to refine the
displayed information, depending on your **Datasource**:
* **Series naming**: Select a method to filter for metrics:
* **Labels** require a **Naming pattern**. Use `{{ label_name }}` to include a
label value. For example, `{{ env }}` will be replaced with values like staging-1, prod-1.
* **Regex**: Use a [regular expression](/investigate/querying/regular-expressions)
in the **Regex** text field to match a time series. You can also use a
**Naming pattern** to rename series using capture groups.
* **Min step**: The step parameter of the PromQL query.
- **Truncation strategy**: Truncation strategy to apply to the query. This modifies
the raw query. Observability Platform selects the best strategy for fit when
possible, and displays `Auto` as the selected strategy.
Available strategies are:
* `Auto`
* `Off`
* `Avg`
* `Min`
* `Max`
Changing your truncation strategy adds truncation information as additional bands
or bars on your chart and details into the legend.
Graphite doesn't have additional query options.
**Series naming**: Select a method to filter for metrics:
* **Labels** require a **Naming pattern**. Use `{{ label_name }}` to include a
label value. For example, `{{ env }}` will be replaced with values like staging-1, prod-1.
* **Regex**: Use a [regular expression](/investigate/querying/regular-expressions)
in the **Regex** text field to match a time series. You can also use a
**Naming pattern** to rename series using capture groups.
## Configure a time series chart
You can configure a time series chart by
[modifying its **Settings**](/observe/dashboards/panels#edit-a-panel).
Any changes you make in the panel's **Settings** tab are immediately reflected in
the **Preview** pane but take effect only when you click **Apply** in the **Edit panel**
interface and then **Save** the dashboard.
Observability Platform doesn't fully support directly editing a panel's JSON
representation and recommends configuring panels in the user interface. Use the JSON
representation only for managing your configuration as code with tools such as
[Chronoctl](/tooling/chronoctl) and [Terraform](/tooling/infrastructure/terraform).
Some override options accept
[regular expressions](/investigate/querying/regular-expressions) to match series by name.
### Modify a time series chart's colors
The **Advanced** tab in a time series chart's **Edit Panel** interface contains
an **Overrides** section where you can add, remove, and configure color overrides.
You can apply color overrides to a specific series or all series that match a regular
expression.
To add a color override:
1. Click the plus sign (**+**) in the **Override** section header.
2. In the field that appears, select whether you want the override to select a series
based on the **series name** or a **series name with a matching regex**.
3. Enter the series name or regular expression to override.
4. Click **Add property**, then click **Color**.
5. Optional: Repeat these steps to create additional color overrides.
To delete a color override, click the
** Delete** icon on its corresponding
row of the Overrides section.
### Modify a time series line style
You can modify the style of line displayed in a time series chart.
1. Click the plus sign (**+**) in the **Override** section header.
2. In the field that appears, select whether you want the override to select a series
based on the **series name** or a **series name with a matching regex**.
3. Enter the series name or regular expression to override.
4. Click **Add property**, then click **Line style**.
5. Select **Solid** (default) or **Dashed**.
6. Optional: Repeat these steps to add line styles to additional time series.
7. Click **Apply**.
To delete a line style override, click the
** Delete** icon on its
corresponding row of the Overrides section.
### Modify a time series chart's legend
The **Legend** section in a time series chart's **Settings** tab controls whether
to display a legend alongside the chart, and if so it also configures where and
how it appears.
* **Show**: Toggles whether to display the legend. Defaults to disabled.
* **Position**: Selects whether to display the legend **Below** or to the **Right**
of the chart. Defaults to `Below`.
* **Mode**: Selects whether to display the legend as a **List** of time series with
a color swatch associating it with a line or bar on the chart, or as a **Table**
with a header row. Defaults to `List`.
* **Size**: Defines the legend's size relative to the chart as either **Small**
or **Medium**. Defaults to `Small`.
* **Values**: Toggles whether to display certain values for each time series, such
as its average, minimum, maximum, and total values, in the legend. Defaults to
showing no values.
* **Avg**: The series' mean value, excluding null values.
* **First**: The series' first value.
* **First \***: The series' first numeric value.
* **Last**: The series' last value.
* **Last \***: The series' last numeric value.
* **Min**: The series' minimum value.
* **Max**: The series' maximum value.
* **Total**: The sum of all values in the series.
Units, abbreviations, and decimal places configured in the **Unit and Formatting**
settings also apply here.
### Modify a time series chart's visual representation
The **Visual** section in a time series chart's **Settings** tab controls how
Observability Platform visualizes the query's time series results in the chart.
* **Display**: Toggles whether to visualize the data as a **Line** or **Bar** chart.
Defaults to `line`.
* **Line Width**: Defines the series' width in pixels. In the **Settings** tab, use
the slider to define a value between 0 and 3. Defaults to `1.5`.
* **Area Opacity**: Defines the opacity of the space beneath each line, from fully
transparent (`0`) to fully opaque (`1`). The fill color for each series is the
same as its line or bar color. Defaults to `0`.
* **Stack Series**: Determines how to display the values for a series. Choose one
of the following values:
* `None`: Display each series' value independently. Default.
* `All`: Display series' values stacked cumulatively on top of each other.
* `Percent`: Display series' values by relative percentage to help show the
proportions of each series change over time.
* **Color Palette**: Determines the chart's color palette. The **Classic** palette
uses six colors and prioritizes readability. The **Consistent** palette
includes more colors and lets you assign a color to a series consistently across
multiple panels. The **Status-neutral** palette excludes red, orange, and green
to help distinguish between the chart's values and status indicators. Defaults to **Classic**.
* **Show Points**: Determines whether to render data points as dots on the chart.
`Auto` renders data points only if doing so doesn't degrade browser performance.
`Always` and `Never` respectively render or hide data points regardless of the
number of data points. Defaults to `Auto`.
* **Null Behavior**: Determines how to chart data points with null values. To connect
points in a Line chart even if there are null values between data points, select
`Connected`. To treat null values as zeroes, select `Null as zero`. Defaults to
`Auto`, which disconnects the series in a Line chart if any points are null.
### Modify time series units and formatting
The **Unit and formatting** section changes the display of units on the chart.
* **Unit**: Defines the unit used to render the Y-axis. This has the most significant
effect when you enable Abbreviate. Defaults to `Decimal`.
* **Decimal**: Base 10 values. Observability Platform renders a value of
`1000000` as `1M`.
* **Bytes**: As decimal multiple-byte units. Observability Platform renders a
value of `1000000` as `1MB`.
* **Time**: Determines the [unit of time](/overview/concepts/time-units)
that Observability Platform uses to interpret a numeric value.
* **Percent**: Interprets the value as a percentile, representing 0% to 100% in a
range of either 0.0 to 1.0 (**Percent (0.0-1.0)**) or 0 and 100
(**Percent (0-100)**).
For example, Observability Platform renders a value of `1.0` in **Percent
(0.0-1.0)** as `100%`, and in **Percent (0-100)** as `1%`.
* **Decimals**: Defines how many decimal places Observability Platform renders for
values.
**Default** renders decimal places only if necessary and rounds to the nearest
value. Numeric values from `0` to `4` render the corresponding number of decimal
places.
* **Abbreviate**: Toggles whether to abbreviate units on the Y-axis. For example, if
enabled, Observability Platform renders a value of `100000000` as `100M`. You can
toggle this setting only if you set the **Unit** to `Decimal` or `Bytes`; `Time`
units are always abbreviated and `Percent` values don't require the toggle.
Defaults to `true`.
### Modify a time series chart's Y axis
The **Y axis** section in a time series chart's **Settings** tab controls whether
Observability Platform renders a chart's Y axis, and if so what information it
includes.
These settings apply to all values on the chart regardless of time series, and
includes any values you enabled in the chart's legend.
* **Show**: Toggles whether to show the Y axis on the chart. Defaults to `true`.
* **Label**: Renders the given text vertically next to the Y axis. Defaults to no
value.
* **Min** and **Max**: Define the minimum and maximum values, respectively, to render
on the chart. Observability Platform doesn't render values smaller than the minimum
or larger than the maximum. Defaults to no value, which dynamically changes the
axis's range to display all data.
#### Add a second Y axis
You can create a series override in a time series chart's **Advanced** tab that
adds a second Y axis for the chart. Use this to indicate the scale and units of
a second series in a single time series chart.
To create an override that adds a right Y axis:
1. Click the plus sign (**+**) in the **Override** section header.
2. In the field that appears, select whether you want the override to select a series
based on the **series name** or a **series name with a matching regex**.
3. Enter the series name or regular expression to override.
4. Click **Add property**, then click **Right y-axis**.
5. Configure the right Y axis, which has the same settings available as the primary
left Y axis.
To delete a right Y axis, click the
** Delete** icon on its corresponding
row of the Overrides section.
### Modify a time series chart's tooltip
The **Tooltip** section in a time series chart's **Settings** tab determines whether
to render a tooltip when you move the cursor over the chart and which time series
it displays.
The **Mode** toggle has three available states, which you can toggle by clicking
them:
| Single | Nearby | Result |
| ------ | ------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| On | Off | The tooltip appears only when the cursor is near a charted time series, and it contains only the time series closest to the cursor. Enabling Single sets Nearby to Off. |
| Off | On | The tooltip appears only when the cursor is near a charted time series, and the tooltip contains all nearby time series. This is the default state of a new time series chart. Enabling Nearby sets Single to Off. |
| Off | Off | The tooltip appears whenever you move the cursor over the chart and displays all time series with data at the point in time represented under the cursor. |
Regardless of this setting's value, the tooltip and chart always highlight the time
series directly beneath the cursor.
### Modify a time series chart's thresholds
The **Thresholds** section in a chart's **Settings** tab defines values
where Observability Platform renders threshold lines over the chart. You can define
threshold values as either absolute numeric values or percentiles. Observability
Platform renders threshold lines as dashed lines.
The threshold's **Mode** defines whether all thresholds use **Absolute** numeric
values, which is the default mode, or **Percent** values. Percent values are relative
to the Y axis' minimum and maximum.
After you add at least one threshold, the **Scale axis** toggle appears in the
**Thresholds** section. **Scale axis** controls whether Observability Platform
automatically expands the Y-axis range to include threshold values. When disabled,
the Y axis displays only the data range, and threshold lines outside that range might
not be visible.
To create a new threshold:
1. Click the plus sign (**+**) in the **Thresholds** section header.
2. In the field that appears, enter a value where you want Observability Platform to
render the threshold line.
3. Optional: Click the color indicator, depicted as a colored circle, to open a
color selector and choose a color for the threshold line.
4. Optional: Click the caret (**>**) to expand the threshold definition, and enter text
in the **Label** field to display on the chart if the threshold is met. This
text displays when you hold the pointer over the area of the chart exceeding the
threshold.
Drag the **Area opacity** slider to highlight the background of the area exceeding
the threshold.
5. In the **Edit panel** dialog, click **Apply** to save your changes.
6. After you've finished editing the panel, click **Save** on the dashboard to save
your changes.
To delete a threshold line, click the caret (**>**) to expand the threshold definition,
and then click the ** Delete** icon
on its corresponding row of the Thresholds section.
### Mark a query as a dynamic threshold
This feature isn't available to all Chronosphere Observability Platform users and
might not be visible in your app. For information about enabling this feature in your
environment, contact [Chronosphere Support](/support).
In addition to [static threshold lines](#modify-a-time-series-charts-thresholds)
defined in the panel settings, mark an individual query as a *dynamic threshold*
to render its returned series as dashed reference lines overlaid on the chart.
Threshold series display alongside regular series rather than contributing to
stack totals or other aggregations. Use dynamic thresholds for reference values
derived from a query, such as an SLO target, an error budget limit, or a baseline
measurement computed from another metric.
To mark a query as a dynamic threshold:
1. In the **Edit panel** interface, click the **Query** tab.
2. Next to the query you want to use as a threshold, click the
**Render query as threshold** button. The query is marked as a threshold
and its series render differently from regular data series.
3. Optional: Click the colored circle icon that appears to open a color picker
and choose a custom threshold color.
4. Click **Apply**, and then click **Save** to save the dashboard.
To remove the threshold flag from a query, click the colored circle icon next to
the query, and then click the ** Remove threshold from query**
icon in the color picker.
Dynamic threshold series affect the following time series chart features:
* **Legend**: Threshold series appear in both list and table legend modes with a
dashed line marker. Toggle threshold series on and off the same way as regular series.
* **Tooltip**: Threshold series appear in the tooltip alongside other nearby series.
* **Stacking**: Threshold series are excluded from stacked series totals and don't
skew cumulative values when **Stack Series** is enabled.
* **Compare mode**: Threshold queries aren't supported in compare mode.
## Time series chart examples
The following examples are [JSON formatted](/observe/dashboards/panels/json-representation)
dashboard code. Modify the variables in these examples for your tenant and applications.
This example creates a time series chart with thresholds in multiple colors, based on
the query's returned values:
```json Timeseries chart with multiple values expandable theme={null}
{
"kind": "Panel",
"spec": {
"display": {
"name": "Time series with thresholds",
"description": ""
},
"plugin": {
"kind": "TimeSeriesChart",
"spec": {
"legend": {
"mode": "List",
"position": "Bottom",
"values": []
},
"thresholds": {
"mode": "Absolute",
"scale_axis": true,
"steps": [
{
"color": "#EA4747",
"value": 0
}
]
},
"tooltip": {
"mode": "nearby",
"sort": "Descending"
},
"visual": {
"area_opacity": 0.05,
"display": "bar",
"null_behavior": "Connected",
"stack": "All"
},
"y_axis": {
"min": 0,
"unit": {
"abbreviate": true,
"kind": "Decimal"
}
},
"y_axis_right": {
"unit": {
"abbreviate": true,
"kind": "Decimal"
}
}
}
},
"queries": [
{
"kind": "DataQuery",
"spec": {
"alias": "Series A",
"plugin": {
"kind": "LogsDataQuery",
"spec": {
"query": "# \"query\": \"service:(mail_fetcher OR mail-fetcher OR rake) fetching -\\\"0 emails\\\" $AccountId\"\nservice = \"mail-fetcher\" OR service = \"mail_fetcher\" OR service = \"rake\"\nNOT \"0 valid emails\"\naccount_id =~ \"$AccountId\"\n\"fetching\"\n| make-series",
"reducer": "Last",
"series_name": {
"name_pattern": "Series A",
"type": "Labels"
}
}
}
}
},
{
"kind": "DataQuery",
"spec": {
"alias": "Series B",
"plugin": {
"kind": "LogsDataQuery",
"spec": {
"query": "# \"query\": \"service:(mail_fetcher OR mail-fetcher OR rake) @account.id:* \\\"emails processed\\\" -\\\"no emails\\\" $AccountId\"\nservice = \"mail-fetcher\" OR service = \"mail_fetcher\" OR service = \"rake\"\n\"emails processed\"\nNOT \"no emails\"\naccount_id =~ \"$AccountId\"\n| make-series",
"reducer": "Last",
"series_name": {
"name_pattern": "Series B",
"type": "Labels"
}
}
}
}
}
],
"formulas": [],
"links": []
}
}
```
This example creates a time series chart with a dynamic threshold query. The first
query returns the data to plot, and the second query is marked as a threshold so
Observability Platform renders its result as a dashed reference line:
```json Time series chart with dynamic threshold query expandable theme={null}
{
"kind": "Panel",
"spec": {
"display": {
"name": "Request rate with SLO target",
"description": ""
},
"plugin": {
"kind": "TimeSeriesChart",
"spec": {
"legend": {
"mode": "List",
"position": "Bottom",
"values": []
},
"tooltip": {
"mode": "nearby",
"sort": "Descending"
},
"visual": {
"display": "line"
},
"y_axis": {
"unit": {
"abbreviate": true,
"kind": "Decimal"
}
}
}
},
"queries": [
{
"kind": "DataQuery",
"spec": {
"alias": "Request rate",
"plugin": {
"kind": "PrometheusTimeSeriesQuery",
"spec": {
"query": "sum(rate(http_requests_total[5m]))"
}
}
}
},
{
"kind": "DataQuery",
"spec": {
"alias": "SLO target",
"threshold": {
"color": "#EA4747"
},
"plugin": {
"kind": "PrometheusTimeSeriesQuery",
"spec": {
"query": "vector(100)"
}
}
}
}
],
"formulas": [],
"links": []
}
}
```