Control Panel & Settings

The ParaCharts control panel groups UI and accessibility options into a set of tabs. Each tab focuses on related controls so you can quickly find and change the behavior or appearance of a chart. Below you will find one short section per tab describing what that tab does and the most useful actions for end users.

Where To See Tabs In Action

Use these examples when explaining control panel behavior to front-end developers:

For broad coverage in one place, start from Example Gallery.

Styling para-control-panel

Yes, you can style the control panel directly. The para-control-panel component reads CSS custom properties and tab layout variables from its host.

Common styling hooks:

Behavior/layout controls via settings:

Example A: Clean Modern Light Panel

<style>
	.cp-modern-light {
		width: min(100%, 720px);
		--control-panel-font-size: 0.95rem;
		--theme-color: #0f766e;
		--background: linear-gradient(180deg, #f8fbff 0%, #eef6ff 100%);
		--summary-padding: 0.08rem 0.6rem;
		--summary-margin: -2px 0;
		--contents-margin: 6px 0 0 0;
		border: 1px solid #c9d8ef;
		border-radius: 12px;
		box-shadow: 0 8px 24px rgba(15, 35, 60, 0.12);
	}
</style>

<para-control-panel class="cp-modern-light"></para-control-panel>

Example B: Warm Neutral Editorial Panel

<style>
	.cp-editorial {
		width: min(100%, 760px);
		--control-panel-font-size: 1rem;
		--theme-color: #9a3412;
		--background: linear-gradient(180deg, #fffaf3 0%, #fff3e2 100%);
		--summary-padding: 0.15rem 0.7rem;
		--summary-margin: -2px 0;
		--contents-margin: 8px 0 0 0;
		border: 1px solid #f3d6b5;
		border-radius: 14px;
		box-shadow: 0 10px 26px rgba(120, 70, 20, 0.14);
	}
</style>

<para-control-panel class="cp-editorial"></para-control-panel>

Settings Example (Manifest)

{
	"settings": {
		"controlPanel.isControlPanelDefaultOpen": true,
		"controlPanel.tabLabelStyle": "iconLabel",
		"controlPanel.isDataTabVisible": true,
		"controlPanel.isColorsTabVisible": true,
		"controlPanel.isAudioTabVisible": true,
		"controlPanel.isAnalysisTabVisible": true
	}
}

Audio

The Audio tab contains settings that control how charts produce sound and spoken output. Use these when you want to enable audible exploration (sonification) or control automatic speech announcements and their verbosity.

Chart

The Chart tab groups presentation options that affect the whole chart: titles, layout, legend, and how series are drawn. These controls are useful when you want to tune the visual presentation for readability or embedding.

Colors

The Colors tab focuses on color selection and contrast to improve clarity and accessibility. Use it to change series palettes, tweak contrast, or enable color-vision modes for users with color deficiencies.

Controls

The Controls tab contains UI-level toggles and access to utility dialogs such as keyboard mappings and advanced settings. It’s the place to change how the control panel behaves and to find keyboard/interaction helpers.

Data

The Data tab is where you inspect, import, and configure the dataset behind the chart. Use it to validate data in a table, upload or link new sources, and tweak parsing settings.

Description

The Description tab manages captions and AI-generated textual summaries that explain the chart. These settings control whether descriptions are shown, how they update, and whether they are announced.

Annotations

The Annotations tab contains tools for adding, editing, and managing notes and callouts on the chart. Annotations help highlight important points or ranges for presentation and collaboration.

Graphing

The Graphing tab exposes tools for plotting mathematical functions or applying graphing presets. It is typically used in educational or analysis contexts where equations or continuous functions are visualized.

Analysis

The Analysis tab provides quick data-inspection tools that compute summaries, detect outliers, and suggest interesting trends. Results are typically brief and aimed at guiding further exploration.