Skip to content

Chart controls


Basic data visualization rules in widgets with charts are described in D3 chart.

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


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


We recommend you to place legend in the top left – above the chart. For charts with a large number of filters, place the legend in the left bottom under the data.

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.

Released under the MIT License.

Released under the MIT License.