Chart controls

Control types ​

The widget's controls can be categorized into the following types:

• General controls and filters
• Chart controls

General controls and filters ​

General controls and filters are always positioned at the same level as the title and include options such as:

• Widget settings
• Chart display settings (smooth or sharp lines, dots or no dots)
• Screenshot settings, and so on.

For widget settings, use a button with use="tertiary" and theme="muted". Remember to add tooltips to all the buttons without visible text.

Chart controls and filters ​

These controls filter the data, axes, and additional controls as described below:

Left-placed controls and filters ​

• Legend
• Country select
• Device (use Select or plain text)
• Notes (refer to Notes module)

Legend ​

We use various types of legends in our charts. Refer to the Chart legend guide for more details.

Country and device select ​

Notes (Notes module) ​

You can display user, system, or other service-generated notes on the chart. To learn more about this module, refer to Notes.

Right-placed controls and filters ​

Always place these controls on the right side of the widget:

• Period (use Pills or plain text) or a custom period
• Data frequency (use Pills)
• Zoom controls

Data period / Frequency ​

The data period can be represented either by the TabLine or additional text with the --text-secondary color.

Custom period ​

For custom periods, use the DateRangePicker.

Data frequency (Daily/Weekly/Monthly) ​

Chart with a zoom ​

Collapsing rows with controls ​

You can collapse rows as needed. Different controls or control groups should be separated by a Divider using the --border-secondary token for color and a margin of 0px 16px.