--- metadata: - name: generator content: Diplodoc Platform v5.63.0 alternate: - en/charts/editor/ - ru/charts/editor/ - href: en/charts/editor/index.md type: text/markdown title: Markdown version csp: - script-src: - https://mc.yandex.ru img-src: - https://mc.yandex.ru connect-src: - https://mc.yandex.ru - wss://mc.yandex.ru child-src: - 'blob:' - https://mc.yandex.ru frame-src: - 'blob:' - https://mc.yandex.ru frame-ancestors: - 'blob:' - https://mc.yandex.ru canonical: en/charts/editor/index.html title: Editor overview description: This page describes the Editor's chart-building features. vcsPath: en/charts/editor/index.md --- # Charts in Editor **Editor** is a JavaScript-based data and selector visualization tool. With Editor, you can upload data from one or multiple sources, manage chart parameters, and configure visualizations. You can use datasets and connections as data sources. ## Interface {#interface} The chart creation page user interface consists of the following sections: 1. Controls: * Managing interface panels: You can select the number and location of your interface panels. Each one can display **CodeEditor**, **Preview**, or **Console**. * Chart preview refresh: After each chart code update, click **Execute** or press `Ctrl`(`Cmd`) + `Enter` to view the result. This action does not save the chart. * Saving the chart: You can save your chart the usual way or create a draft version. 1. If Editor is opened with parameters stated in the URL, a panel with overridden parameters (2 on the screenshot) will appear below the controls panel. 1. **CodeEditor** panel to view and edit the contents of the chart's tabs. To learn more about tabs (3.1 on the screenshot), see [Tabs](./tabs.md). 1. **Console** panel for additional debugging information. 1. Chart **Preview** panel. ![image](../../_assets/datalens/editor/editor-yc.png) #### What's next {#see-also} * [Quick start in Editor](./quickstart/index.md)