Chart controls

Control types ​

Controls in the widget can be divided into the following types:

• general controls and filters;
• chart controls.

General controls and filters ​

General controls and filters are always placed on the same level as the title. For example they include:

• widget settings;
• chart display settings (smooth or sharp line, dot or without dots);
• screenshot settings, etc.

For widget settings use icon button with use="tertiary" and theme="muted". If you want to place another button next to the settings button, add Divider with 16px margin between them. Don't forget to add a tooltip to all the buttons.

Chart controls and filters ​

These controls filter the data, axes, and some controls shown below.

Left-placed controls and filters ​

• Legend;
• Country select;
• Device (Select or just text);
• Notes (Notes module).

Legend ​

We use several types of legends in our charts. Find more details in the Chart legend guide.

Country and device select ​

Notes (Notes module) ​

You can display notes made by the user, system, or other services on the chart. To read more about this module, see Notes.

Right-placed controls and filters ​

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

• Period (Pills or text) or custom period;
• Data frequency (Pills);
• Zoom controls.

Data period / frequency ​

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

Custom period ​

For custom period use DateRangePicker.

Data frequency (daily/weekly/monthly) ​

Chart with a zoom ​

Collapsing rows with controls ​

You can collapse rows if necessary.

Divide different controls or groups of controls with Divider with the --border-secondary token for color and margin: 0px 16px.