Basic data visualization rules in widgets with charts are described in D3 chart.
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
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:
Data period / frequency
Data period can be represented either by the TabLine or by additional text with the
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.