Customize the toolbar

Hide chrome regions, restrict the resolution selector, and change the default tool — three CSS + store recipes.

EliteChart's chrome bars are designed to be partially hideable. Phase 1b will land the bars={{ top, left, right, bottom }} prop for first-class hiding; until then, hide via CSS and tweak via the store.

Quick example

code

/* your-app.css */
header[role="banner"] [data-cf-region="indicators"] { display: none; }
header[role="banner"] [data-cf-region="compare"]    { display: none; }
nav[aria-label="Drawing tools"] [data-cf-tool="brush"] { display: none; }

How it works

Every chrome region is data-attributed (data-cf-region, data-cf-tool) so you can target it without relying on internal class names. CSS hiding doesn't dispose the React subtree, so hidden buttons are still keyboard-reachable via their store methods — useful for "hidden but scriptable" workflows.

Variations

Restrict the resolution selector

The selector renders whatever the customResolutions store value contains, falling back to the built-in list if unset.

code

import { useChartStore } from '@elitechart/elitechart';
useChartStore.getState().setCustomResolutions(['1m', '5m', '15m', '1h']);

Set the default drawing tool

code

useChartStore.getState().setActiveTool('trend-line');

Hide the bottom drawer entirely

code

footer[role="contentinfo"] { display: none; }

API

Region	Data attribute	Hide via
Top bar	`header[role="banner"]`	CSS
Left rail	`nav[aria-label="Drawing tools"]`	CSS
Right sidebar	`aside[aria-label="Sidebar"]`	CSS
Bottom drawer	`footer[role="contentinfo"]`	CSS

Quick example

How it works

Variations

Restrict the resolution selector

Set the default drawing tool

Hide the bottom drawer entirely

API

Related