### Start Development Environment

Source: https://github.com/elastic/elastic-charts/blob/main/README.md

Run this command to set up the local development environment, including installing dependencies and starting the development server.

```bash
yarn
yarn start
```

--------------------------------

### Install Project Dependencies

Source: https://github.com/elastic/elastic-charts/blob/main/docs/README.md

Run this command to install all necessary project dependencies using Yarn.

```bash
$ yarn
```

--------------------------------

### Start Local Development Server

Source: https://github.com/elastic/elastic-charts/blob/main/docs/README.md

Starts a local development server that automatically refreshes the browser on code changes. Opens the site in a browser window.

```bash
$ yarn start
```

--------------------------------

### Start E2E Server

Source: https://github.com/elastic/elastic-charts/wiki/Testing

Starts the e2e_server, which acts as a simplified Storybook server for the end-to-end tests. This is useful for debugging issues that may arise with the server build.

```bash
yarn test:e2e:server
```

--------------------------------

### Install Node Version with NVM

Source: https://github.com/elastic/elastic-charts/blob/main/README.md

Install the correct Node.js version required by the project using the Node Version Manager (nvm).

```bash
nvm install
```

--------------------------------

### TooltipTable Configuration and Integration Example

Source: https://github.com/elastic/elastic-charts/wiki/Custom-Tooltip

Demonstrates how to define columns for TooltipTable and integrate it within a custom tooltip. This example shows defining text and number columns with headers, footers, and cell renderers.

```tsx
const columns: TooltipTableColumn<Datum, XYChartSeriesIdentifier<Datum>>[] = [
    { type: "color"},
    { type: "text",  header: 'Shop', footer: 'total', cell: ({label}) => label },
    { type: "text", header: 'Location', cell: (d) => d.datum?.extra ?? ''},
    { type: "number", header: 'Qty', footer: (items) => `${items.reduce((s, d) => s + d.value, 0)}`,  cell: (d) => d.value, style: {textAlign: 'right'} },
];
...

<Tooltip customTooltip={({values}) =>  <TooltipContainer><TooltipTable columns={columns} items={values} /></TooltipContainer>} />

```

--------------------------------

### Example Datasets for Bar Charts

Source: https://github.com/elastic/elastic-charts/wiki/Overview

These datasets illustrate how to structure data for charting, showing examples with one metric and no groups, and with two metrics and one group.

```typescript
const BARCHART_1Y0G = [{ x: 0, y: 1 }, { x: 1, y: 2 }, { x: 2, y: 10 }, { x: 3, y: 6 }];
```

```typescript
const BARCHART_2Y1G = [
  { x: 0, g: 'a', y1: 1, y2: 4 },
  { x: 0, g: 'b', y1: 3, y2: 6 },
  { x: 1, g: 'a', y1: 2, y2: 1 },
  { x: 1, g: 'b', y1: 2, y2: 5 },
  { x: 2, g: 'a', y1: 10, y2: 5 },
  { x: 2, g: 'b', y1: 3, y2: 1 },
  { x: 3, g: 'a', y1: 7, y2: 3 },
  { x: 3, g: 'b', y1: 6, y2: 4 },
];
```

--------------------------------

### Conventional Commit Example

Source: https://github.com/elastic/elastic-charts/wiki/Contributing-to-Elastic-Charts

This example demonstrates the structure of a conventional commit message, including type, scope, description, body, breaking changes, and issue tracking.

```markdown
feat(brush): add multi axis brushing (#625)

This commit allows the consumer to configure the direction used for the brush tool. The direction is, by default, along the X-axis, but can be changed to be along the Y-axis or have a rectangular selection along both axes.
For each Y-axis defined (usually determined by an associated `groupId`) we return a scaled set of `[min, max]` values.

BREAKING CHANGE: The type used by the `BrushEndListener` is now in the following form `{ x?: [number, number]; }` where `x` contains an array of `[min, max]` values, and the  `y` property is an optional array of objects, containing the `GroupId` and the values of the brush for that specific axis.

fix #587, fix #620

Signed-off-by: name 1 <email1@email1.com>
Co-authored-by: name 2 <email2@email2.com>


```

--------------------------------

### Elastic Charts Specification Example

Source: https://github.com/elastic/elastic-charts/wiki/Overview

A declarative JSX example of a chart specification, including settings, axes, and series definitions.

```jsx
<Chart renderer={renderer}>
  <Settings rotation={rotation} />
  <Axis id="bottom" position={AxisPosition.Bottom} title="Rendering test" />
  <Axis id="left" position={AxisPosition.Left} />
  <LineSeries
    id="1"
    yScaleType={ScaleType.Linear}
    xScaleType={ScaleType.Linear}
    xAccessor="x"
    yAccessors={['y']}
    data={BARCHART_1Y0G}/>
  <BarSeries
    id="2"
    yScaleType={ScaleType.Linear}
    xScaleType={ScaleType.Linear}
    xAccessor="x"
    yAccessors={['y1', 'y2']}
    splitSeriesAccessors={['g']}
    stackAccessors={['x', 'g']}
    data={BARCHART_2Y1G}/>
</Chart>
```

--------------------------------

### Bootstrap Kibana

Source: https://github.com/elastic/elastic-charts/wiki/Contributing-to-Elastic-Charts

Run the Kibana bootstrap command with the --no-validate flag when installing from a local source.

```bash
yarn kbn bootstrap --no-validate
```

--------------------------------

### Install Elastic Charts with Yarn

Source: https://github.com/elastic/elastic-charts/blob/main/README.md

Use this command to add the Elastic Charts library to your project. Note that npm is not supported.

```bash
yarn add @elastic/charts
```

--------------------------------

### Add moment-timezone Dependency

Source: https://github.com/elastic/elastic-charts/wiki/Consuming-@elastic-charts

Install the moment-timezone peer dependency for standalone projects.

```bash
yarn add moment-timezone
```

--------------------------------

### Example Test with React Testing Library

Source: https://github.com/elastic/elastic-charts/wiki/Testing

Demonstrates how to test Elastic Charts components using React Testing Library, including setting up mocks for ResizeObserver and timers, and rendering both DOM-based and Canvas-based charts.

```typescript
import { render } from '@testing-library/react';

... // Assuming setupChartMocks, cleanChartMocks, and other necessary imports are here

describe('my Elastic Charts tests', () => {

   beforeAll(() => {
     setupChartMocks();
     jest.useFakeTimers();
   });

   afterAll(() => {
     cleanChartMocks();
     jest.useRealTimers();
   });

   async function renderMetricChart(props){
     const onRenderChange = jest.fn();
     const result = render(<Chart>
         <Settings onRenderChange={onRenderChange}> 
           <Metric {...props}/>
         </Settings>
     </Chart>);
     // wait for 1 rAF tick (~16ms)
     jest.advanceTimersByTime(30);
     // wait for render complete callback
     await waitFor(() => expect(onRenderChange).toHaveBeenCalledWith(true));
     return result;
   }

   async function renderCanvasChart(props){
     const onRenderChange = jest.fn();
     // make sure to enable the "debugState" flag in Settings for a Canvas based chart
     const result = render(<Chart>
         <Settings onRenderChange={onRenderChange} debugState={true}> 
           <Partition {...props}/>
         </Settings>
     </Chart>);
     // wait for 1 rAF tick (~16ms)
     jest.advanceTimersByTime(30);
     // wait for render complete callback
     await waitFor(() => expect(onRenderChange).toHaveBeenCalledWith(true));
     return result;
   }

  it('tests metric chart', async () => {
    await renderMetricChart({ data: ...});
    // i.e. for Metric chart it can be inspected as it's DOM based
    expect(screen.getByText(...)).toBeInTheDocument();
  });

  it('tests canvas chart', async () => {
    const { container } = await renderCanvasChart({ data: ...});
    
    const debugConfig = JSON.parse(container.querySelector('.echChartStatus').getAttribute('data-ech-debug-state'));
    // test the debug state here
  });
});

```

--------------------------------

### Run Playwright E2E Tests

Source: https://github.com/elastic/elastic-charts/wiki/Testing

Executes the Playwright end-to-end tests against the e2e_server. This command starts Playwright within a Docker container, runs tests, and compares screenshots against baselines. Failures result in diff images being stored.

```bash
yarn test:e2e
```

--------------------------------

### Run Backport Command

Source: https://github.com/elastic/elastic-charts/wiki/Contributing-to-Elastic-Charts

Use the backport CLI to select commits and targets for backporting. The first run will fork the repository locally.

```bash
# use cli to select commit to backport
yarn backport --branch 15.x
yarn backport --branch <New Branch Name>

# specify the pr number to backport
yarn backport --branch 15.x --pr 1000
yarn backport --branch <New Branch Name> --pr <PR number to backport>
```

--------------------------------

### Build and Pack Elastic Charts

Source: https://github.com/elastic/elastic-charts/wiki/Contributing-to-Elastic-Charts

Build and pack the Elastic Charts locally to create a .gz file for linking to Kibana.

```bash
cd ./packages/charts
yarn build
npm pack
```

--------------------------------

### Import Light Theme CSS

Source: https://github.com/elastic/elastic-charts/wiki/Consuming-@elastic-charts

Import the CSS styles for the light theme. Ensure you use a bundler with appropriate loaders.

```javascript
import '@elastic/charts/dist/theme_light.css';
```

--------------------------------

### DataGenerator Class

Source: https://github.com/elastic/elastic-charts/blob/main/packages/charts/api/charts.api.md

Provides utility methods for generating various types of series data, useful for testing and examples.

```APIDOC
## Class DataGenerator

### Description
Provides utility methods for generating various types of series data, useful for testing and examples.

### Methods

#### `constructor(frequency?: number, randomNumberGenerator?: RandomNumberGenerator)`
Initializes a new instance of the DataGenerator class.

#### `generateBasicSeries(totalPoints?: number, offset?: number, amplitude?: number): { x: number; y: number; }[]`
Generates a basic series of data points.

#### `generateGroupedSeries(totalPoints?: number, totalGroups?: number, groupPrefix?: string): { x: number; y: number; g: string; }[]`
Generates a series of grouped data points.

#### `generateRandomGroupedSeries(totalPoints?: number, totalGroups?: number, groupPrefix?: string): { x: number; y: number; z: number; g: string; }[]`
Generates a series of randomly valued grouped data points.

#### `generateRandomSeries(totalPoints?: number, groupIndex?: number, groupPrefix?: string): { x: number; y: number; z: number; g: string; }[]`
Generates a series of random data points.

#### `generateSimpleSeries(totalPoints?: number, groupIndex?: number, groupPrefix?: string): { x: number; y: number; g: string; }[]`
Generates a simple series of data points.

#### `generateSMGroupedSeries<T extends Record<string, any>>(verticalGroups: Array<number | string> | number, horizontalGroups: Array<number | string> | number, seriesGenerator: (h: string | number, v: string | number) => T[]): ({ h: string | number; v: string | number; } & T)[]`
Generates a structured grouped series with custom data generation.
```

--------------------------------

### Get Charts Theme

Source: https://github.com/elastic/elastic-charts/blob/main/packages/charts/api/charts.api.md

Retrieves a theme for charts, either by name and color mode or by name and a boolean indicating dark mode.

```typescript
getChartsTheme({
    name: string;
    darkMode: boolean;
}): Theme;
```

```typescript
getChartsTheme(themeName: string, colorMode: 'DARK' | 'LIGHT'): Theme;
```

--------------------------------

### Import Legacy Light Theme Only CSS

Source: https://github.com/elastic/elastic-charts/wiki/Consuming-@elastic-charts

Import legacy light theme styles. These will be removed in a future version.

```javascript
import '@elastic/charts/dist/legacy/theme_only_light.css';
```

--------------------------------

### roundDateToESInterval

Source: https://github.com/elastic/elastic-charts/blob/main/packages/charts/api/charts.api.md

Rounds a given date to the nearest Elasticsearch interval start or end point. This is useful for aligning chart data with Elasticsearch time-based aggregations.

```APIDOC
## roundDateToESInterval

### Description
Rounds a date to the nearest Elasticsearch interval start or end point.

### Function Signature
`roundDateToESInterval(date: UnixTimestamp | Date, interval: ESCalendarInterval | ESFixedInterval, snapTo: 'start' | 'end', timeZone: string): UnixTimestamp`

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Function Parameters
- **date** (UnixTimestamp | Date) - The date to round.
- **interval** (ESCalendarInterval | ESFixedInterval) - The Elasticsearch interval to snap to.
- **snapTo** ('start' | 'end') - Whether to snap to the start or end of the interval.
- **timeZone** (string) - The time zone to use for rounding.

### Request Example
None (This is a function call, not an HTTP request)

### Response
#### Success Response
- **UnixTimestamp** - The rounded date as a Unix timestamp.

### Response Example
None (This is a function call, not an HTTP request)
```

--------------------------------

### Build Static Website Content

Source: https://github.com/elastic/elastic-charts/blob/main/docs/README.md

Generates the static content for the website, typically placed in the 'build' directory. This content can be hosted on any static hosting service.

```bash
$ yarn build
```

--------------------------------

### Deploy Website using SSH

Source: https://github.com/elastic/elastic-charts/blob/main/docs/README.md

Deploys the website using SSH. This is a convenient way to build the site and push it to the 'gh-pages' branch if using GitHub pages.

```bash
$ USE_SSH=true yarn deploy
```

--------------------------------

### Import Light Theme Only CSS

Source: https://github.com/elastic/elastic-charts/wiki/Consuming-@elastic-charts

Import only the light theme CSS, excluding reset styles, if using with a styling library like EUI.

```javascript
import '@elastic/charts/dist/theme_only_light.css';
```

--------------------------------

### Import Dark Theme CSS

Source: https://github.com/elastic/elastic-charts/wiki/Consuming-@elastic-charts

Import the CSS styles for the dark theme. Ensure you use a bundler with appropriate loaders.

```javascript
import '@elastic/charts/dist/theme_dark.css';
```

--------------------------------

### Import Legacy Dark Theme Only CSS

Source: https://github.com/elastic/elastic-charts/wiki/Consuming-@elastic-charts

Import legacy dark theme styles. These will be removed in a future version.

```javascript
import '@elastic/charts/dist/legacy/theme_only_dark.css';
```

--------------------------------

### Import Polyfills for IE11

Source: https://github.com/elastic/elastic-charts/wiki/Consuming-@elastic-charts

Import core-js stable and regenerator-runtime for IE11 compatibility when using Elastic Charts.

```javascript
import 'core-js/stable';
import 'regenerator-runtime/runtime';
```

--------------------------------

### Import Dark Theme Only CSS

Source: https://github.com/elastic/elastic-charts/wiki/Consuming-@elastic-charts

Import only the dark theme CSS, excluding reset styles, if using with a styling library like EUI.

```javascript
import '@elastic/charts/dist/theme_only_dark.css';
```

--------------------------------

### Configure Partition Percentage Formatter

Source: https://github.com/elastic/elastic-charts/wiki/Tooltip

Enables and formats the display of percentage values for data points in Partition charts using percentFormatter.

```tsx
<Partition percentFormatter={(v: number) => `${d.toFixed(1)}%`}} />
```

--------------------------------

### TooltipPortalSettings Type

Source: https://github.com/elastic/elastic-charts/blob/main/packages/charts/api/charts.api.md

Configuration for controlling the portal placement and boundaries of the tooltip.

```APIDOC
## TooltipPortalSettings<B>

### Description

`TooltipPortalSettings` defines the parameters for positioning and constraining the tooltip's rendering area, often used when the tooltip is rendered in a portal.

### Type Definition

```typescript
interface TooltipPortalSettings<B = never> {
    boundary?: HTMLElement | B;
    boundaryPadding?: Partial<Padding> | number;
    fallbackPlacements?: Placement[];
    offset?: number;
    placement?: Placement;
}
```

### Properties

- **boundary** (HTMLElement | B, optional): The HTML element that acts as the boundary for the tooltip's positioning.
- **boundaryPadding** (Partial<Padding> | number, optional): Padding around the boundary element.
- **fallbackPlacements** (Placement[], optional): An array of preferred placements to try if the primary placement is not suitable.
- **offset** (number, optional): The distance in pixels between the tooltip and its reference element.
- **placement** (Placement, optional): The desired placement of the tooltip (e.g., 'top', 'bottom', 'left', 'right').
```

--------------------------------

### Initialize Animation State in XYChartComponent

Source: https://github.com/elastic/elastic-charts/blob/main/packages/charts/src/chart_types/xy_chart/renderer/canvas/animations/README.md

Adds the animationState instance property, initializes it in the constructor, and includes logic to clear the animation state on component unmount.

```tsx
class XYChartComponent extends React.Component<XYChartProps> {
  private animationState: AnimationState; // step 1

  constructor(props: Readonly<XYChartProps>) {
    this.animationState = { rafId: NaN, pool: new Map() }; // step 2
  }

  componentWillUnmount() { // step 3
    window.cancelAnimationFrame(this.animationState.rafId);
    this.animationState.pool.clear();
  }

  private drawCanvas() {
    if (this.ctx) {
      renderXYChartCanvas2d(this.ctx, this.devicePixelRatio, this.props, this.animationState); // step 4
    }
  }
}
```

--------------------------------

### Deploy Website without SSH

Source: https://github.com/elastic/elastic-charts/blob/main/docs/README.md

Deploys the website without using SSH. Requires specifying your GitHub username.

```bash
$ GIT_USER=<Your GitHub username> yarn deploy
```

--------------------------------

### Global Settings Configuration

Source: https://github.com/elastic/elastic-charts/blob/main/docs/docs/api/specs/global/settings.mdx

Configuration options for global chart settings.

```APIDOC
## Global Settings

### Description
Configuration options for global chart settings.

### Props

#### `theme`
- Type: `PartialTheme | PartialTheme[]`
- Description: Partial theme to be merged with base or Array of partial themes to be merged with base index `0` being the highest priority (i.e. `[primary, secondary, tertiary]`)

#### `baseTheme`
- Type: `Theme`
- Default: `LIGHT_THEME`
- Description: **Full** default theme to use as base

#### `rendering`
- Type: `Rendering`
- Description: Rendering options for the chart.

#### `rotation`
- Type: `Rotation`
- Default: `0`
- Description: Rotation setting for the chart.

#### `animateData`
- Type: `boolean`
- Default: `true`
- Description: Enables or disables data animation.

#### `externalPointerEvents`
- Type: `ExternalPointerEventsSettings`
- Tag: `@alpha`
- Description: Settings for handling external pointer events.

#### `debug`
- Type: `boolean`
- Default: `false`
- Description: Show debug shadow elements on chart.

#### `debugState`
- Type: `boolean`
- Tag: `@alpha`
- Description: Show debug render state on `ChartStatus` component.

#### `onProjectionClick`
- Type: `ProjectionClickListener`
- Description: Attach a listener for click on the projection area. The listener will be called with the current x value snapped to the closest X axis point, and an array of Y values for every groupId used in the chart.

#### `onElementClick`
- Type: `ElementClickListener`
- Description: Listener for element click events.

#### `onElementOver`
- Type: `ElementOverListener`
- Description: Listener for element over events.

#### `onElementOut`
- Type: `BasicListener`
- Description: Listener for element out events.

#### `onBrushEnd`
- Type: `BrushEndListener`
- Description: Listener for brush end events.

#### `onPointerUpdate`
- Type: `PointerUpdateListener`
- Description: Listener for pointer update events.

#### `onResize`
- Type: `ResizeListener`
- Tag: `@alpha`
- Description: Listener for chart resize events.

#### `onRenderChange`
- Type: `RenderChangeListener`
- Description: Listener for render change events.

#### `onWillRender`
- Type: `WillRenderListener`
- Description: Listener for will render events.

#### `onProjectionAreaChange`
- Type: `ProjectionAreaChangeListener`
- Description: Listener for projection area change events.

#### `pointBuffer`
- Type: `MarkBuffer`
- Default: `10`
- Description: The min distance from the rendered point circumference to highlight a cartesian data point in line/area/bubble charts.

#### `xDomain`
- Type: `CustomXDomain`
- Description: Custom domain for the X axis.

#### `onAnnotationClick`
- Type: `AnnotationClickListener`
- Description: Allows user to set a click handler to the annotations.

#### `resizeDebounce`
- Type: `number`
- Default: `DEFAULT_RESIZE_DEBOUNCE`
- Description: The debounce delay used for resizing chart.

#### `pointerUpdateDebounce`
- Type: `number`
- Description: Debounce delay used for `onPointerUpdate` listener.

#### `pointerUpdateTrigger`
- Type: `PointerUpdateTrigger`
- Default: `PointerUpdateTrigger.X`
- Description: The trigger for `onPointerUpdate` listener. Options: `'x'`, `'y'`, `'both'`.

#### `brushAxis`
- Type: `BrushAxis`
- Default: `BrushAxis.X`
- Description: Defines which axes are able to be brushed.

#### `minBrushDelta`
- Type: `number`
- Default: `2`
- Description: The minimum number of pixels to consider for a valid brush event (in both axis if `brushAxis` prop is `BrushAxis.Both`).

#### `roundHistogramBrushValues`
- Type: `boolean`
- Default: `false`
- Description: Boolean to round brushed values to nearest step bounds. Applies only to histogram charts.

#### `allowBrushingLastHistogramBin`
- Type: `boolean`
- Default: `true`
- Description: Boolean to allow brushing on the last bucket even when outside the domain or limit to the end of the domain. Applies only to histogram charts.

```

--------------------------------

### Rendering a Simple Header-Only Tooltip

Source: https://github.com/elastic/elastic-charts/wiki/Custom-Tooltip

Create a basic tooltip that only displays a header. This is achieved by passing a formatter function to the `TooltipHeader` component.

```tsx
<Tooltip customTooltip={({header}) =>  <TooltipContainer><TooltipHeader header={header} formatter={(d) => `X: ${d.formattedValue}`} /></TooltipContainer>} />
```

--------------------------------

### Partition Layouts

Source: https://github.com/elastic/elastic-charts/blob/main/packages/charts/api/charts.api.md

Defines the available layout types for the Partition component, including sunburst, treemap, icicle, flame, mosaic, and waffle.

```APIDOC
## PartitionLayout Enum

### Description

The `PartitionLayout` type specifies the visual arrangement of data within the Partition component. Users can choose from several predefined layouts to best represent their hierarchical data.

### Values

- `sunburst`: A radial layout where each ring represents a level in the hierarchy.
- `treemap`: A layout that displays hierarchical data as a set of nested rectangles.
- `icicle`: A linear layout that displays hierarchy levels as parallel rectangles.
- `flame`: Similar to icicle, but often used to visualize call stacks or resource usage.
- `mosaic`: A layout that uses nested rectangles, where the size of each rectangle is proportional to its value.
- `waffle`: A layout that uses a grid of squares to represent hierarchical data.

### Type Definition

```typescript
export type PartitionLayout = "sunburst" | "treemap" | "icicle" | "flame" | "mosaic" | "waffle";
```
```

--------------------------------

### Elastic Charts Rendering Pipeline Flowchart

Source: https://github.com/elastic/elastic-charts/wiki/Overview

Illustrates the unidirectional rendering flow of the Elastic Charts library, from acquiring chart specifications to rendering the final chart.

```mermaid
%%{init: {'theme': 'neutral', "flowchart" : { "curve" : "basis" } } }%%
flowchart TD
  A(Aquire chart specs)
  B(Compute series domains)
  C(Compute chart dimensions)
  D(Compute chart geometries)
  E(Render chart)

  A --> B --> C --> D --> E
```

--------------------------------

### Tooltip Configuration Component

Source: https://github.com/elastic/elastic-charts/wiki/Tooltip

The main configuration component for the Tooltip. Specific prop details are pending.

```tsx
<Tooltip type={} />
```

--------------------------------

### Generate E2E Test Files

Source: https://github.com/elastic/elastic-charts/wiki/Testing

This command generates the necessary files from Storybook details to run the visual regression testing suite. Run this only the first time you need to run VRTs or if new stories have been added.

```bash
yarn test:e2e:generate
```

--------------------------------

### Mock ResizeObserver for Jest

Source: https://github.com/elastic/elastic-charts/wiki/Testing

Provides a mock implementation of ResizeObserver and helper functions to set up and clean mocks for Jest tests. This is necessary because Elastic Charts uses ResizeObserver for fitting charts to their containers.

```typescript
class ResizeObserverMock {
  private cb: Function | undefined;
  constructor(cb: Function) {
    this.cb = cb;
  }
  observe() {
    setTimeout(() => {
      this.cb?.([{ contentRect: { width: 500, height: 500 } }]);
    }, 0);
  }
  unobserve() {
    // do nothing
  }
  disconnect() {
    // do nothing
  }
}

let roPrevious: typeof global.ResizeObserver | undefined;

export function setupChartMocks() {
  roPrevious = global.ResizeObserver;
  global.ResizeObserver = ResizeObserverMock;
}

export function cleanChartMocks() {
  if (roPrevious) {
    global.ResizeObserver = roPrevious;
  }
}
```

--------------------------------

### Create Backport Branch

Source: https://github.com/elastic/elastic-charts/wiki/Contributing-to-Elastic-Charts

Create a new branch for backporting a version. The branch name should follow the semantic-release maintenance branch convention.

```bash
git checkout -b 15.x v15.4.2
git push <Upstream remote> # must push to remote fork!

# where
git checkout -b <New Branch Name> <TAG Name>
```

--------------------------------

### Tooltip Configuration Properties

Source: https://github.com/elastic/elastic-charts/blob/main/docs/docs/api/specs/global/tooltip.mdx

Defines settings for chart tooltip. All props can be found via `GroupByProps` type.

```APIDOC
## Tooltip Configuration

### Description
Configuration options for chart tooltips.

### Props

#### `type`
- Type: `TooltipType`
- Default: `TooltipType.Vertical`
- Description: The type of the tooltip.

#### `snap`
- Type: `boolean`
- Default: `true`
- Description: Whenever the tooltip needs to snap to the x/band position or not.

#### `headerFormatter`
- Type: `TooltipHeaderFormatter<D>`
- Description: A formatter for the header value. Ignored when `header` is defined.

#### `unit`
- Type: `string`
- Tag: `@alpha`
- Description: Unit for event (i.e. `time`, `feet`, `count`, etc.).

#### `customTooltip`
- Type: `CustomTooltip<D, SI>`
- Description: Render custom tooltip given header and values.

#### `stickTo`
- Type: `TooltipStickTo`
- Default: `mousePosition`
- Description: Stick the tooltip to a specific position within the current cursor.

#### `showNullValues`
- Type: `boolean`
- Default: `false`
- Description: Show null values on the tooltip.

#### `header`
- Type: `'default' | 'none' | ComponentType<{ items: TooltipValue<D, SI>[]; header: PointerValue<D> | null }>`
- Description: Custom header for tooltip. Ignored when used with `customTooltip`. This is not the table headers but spans the entire tooltip.

#### `body`
- Type: `'default' | 'none' | ComponentType<{ items: TooltipValue<D, SI>[]; header: PointerValue<D> | null }>`
- Description: Custom body for tooltip. Ignored when used with `customTooltip`. This is not the table body but spans the entire tooltip.

#### `footer`
- Type: `'default' | 'none' | ComponentType<{ items: TooltipValue<D, SI>[]; header: PointerValue<D> | null }>`
- Description: Custom footer for tooltip. Ignored when used with `customTooltip`. This is not the table footers but spans the entire tooltip.

#### `actions`
- Type: `TooltipAction<D, SI>[] | ((selected: TooltipValue<D, SI>[]) => Promise<TooltipAction<D, SI>[]> | TooltipAction<D, SI>[])`
- Description: Actions to enable tooltip selection.

#### `actionsLoading`
- Type: `string | ComponentType<{ selected: TooltipValue<D, SI>[] }>`
- Description: Shown in place of actions UI while loading async actions.

#### `noActionsLoaded`
- Type: `string | ComponentType<{ selected: TooltipValue<D, SI>[] }>`
- Description: Shown in place of actions UI after loading async actions and finding none.

#### `actionPrompt`
- Type: `string`
- Description: Prompt displayed to indicate user can right-click for contextual menu.

#### `pinningPrompt`
- Type: `string`
- Description: Prompt displayed to indicate user can right-click for contextual menu.

#### `selectionPrompt`
- Type: `string`
- Description: Prompt displayed when tooltip is pinned but all actions are hidden.

#### `maxTooltipItems`
- Type: `number`
- Description: Max number of tooltip items before showing only highlighted values.

#### `maxVisibleTooltipItems`
- Type: `number`
- Description: Max number of visible tooltip items before scrolling. Does not apply to custom tooltips.
```

--------------------------------

### Import Chart Components

Source: https://github.com/elastic/elastic-charts/wiki/Consuming-@elastic-charts

Import necessary components from the top-level Elastic Charts module.

```javascript
import { Axis, BarSeries, Chart, Position, ScaleType } from '@elastic/charts';
```

--------------------------------

### Trigger Build with PR Comment

Source: https://github.com/elastic/elastic-charts/wiki/Continuous-integration

Use the phrase `buildkite test this` in a pull request comment to manually trigger a Buildkite build. This action also removes any `skip-ci` labels.

```text
buildkite test this
```

--------------------------------

### Run All Timezone Tests

Source: https://github.com/elastic/elastic-charts/wiki/Testing

To run a test suite on multiple timezones, prepend `.tz` to the standard `.test.ts` extension. This will execute tests in the local timezone, UTC, America/New_York, and Asia/Tokyo. Local timezone tests are included in code coverage.

```bash
formatters.tz.test.ts
scales.tz.test.ts
```

--------------------------------

### TooltipStyle

Source: https://github.com/elastic/elastic-charts/blob/main/packages/charts/api/charts.api.md

Defines the styling properties for tooltips, including default colors and size constraints.

```APIDOC
## TooltipStyle

### Description
Defines the styling properties for tooltips, including default colors and size constraints.

### Interface
```typescript
export interface TooltipStyle {
    defaultDotColor: Color;
    maxTableHeight: CSSProperties['maxHeight'];
    maxWidth: NonNullable<CSSProperties['maxWidth']>;
}
```
```

--------------------------------

### HistogramBarSeries Configuration

Source: https://github.com/elastic/elastic-charts/blob/main/docs/docs/api/specs/xy/histogram_bar_series.mdx

Configuration options for the HistogramBarSeries, including inherited props and specific styling properties.

```APIDOC
## HistogramBarSeries

### Description

This spec describes the dataset configuration used to display a histogram bar series. It is identical to the `BarSeries` but overrides `enableHistogramMode` to `true`.

A histogram bar series is identical to a bar series except for the bar width.

### Props

All props can be found via [`HistogramBarSeriesProps`](/all-types/type-aliases/HistogramBarSeriesProps) type.

#### Inherited Props

- [`BarSeriesSpec`](./BarSeriesSpec) Props

#### Specific Props

- **barSeriesStyle** (RecursivePartial<BarSeriesStyle>): Styles to apply to bar series. Overrides styles from [`Theme`](#gtd-theme).
- **stackMode** (StackMode): Stack each series using a specific mode: Percentage, Wiggle, Silhouette. Default: `'100%'.`
- **styleAccessor** (BarStyleAccessor): Functional accessor to return custom color or style for bar datum. Default: `'100%'.`
- **minBarHeight** (number): Minimum height to render bars for highly variable data (i.e. ranges from 1 to 100,000). Unit: `pixel`.
```

--------------------------------

### TooltipContext Type

Source: https://github.com/elastic/elastic-charts/blob/main/packages/charts/api/charts.api.md

Provides context for tooltip interactions, including selection, theme, and configuration.

```APIDOC
## TooltipContext<D, SI>

### Description

The `TooltipContext` interface provides access to various properties and functions related to the tooltip's state and behavior within the Elastic Charts ecosystem. It's typically used by custom tooltip renderers or advanced configurations.

### Interface Definition

```typescript
interface TooltipContext<D extends BaseDatum = Datum, SI extends SeriesIdentifier = SeriesIdentifier> {
    actionable: boolean;
    backgroundColor: string;
    canPinTooltip: boolean;
    dir: 'rtl' | 'ltr';
    maxItems: number;
    pinned: boolean;
    pinTooltip: PinTooltipCallback;
    selected: Array<TooltipValue<D, SI>>;
    setSelection: CustomTooltipProps['setSelection'];
    theme: TooltipStyle;
    toggleSelected: CustomTooltipProps['toggleSelected'];
    values: TooltipValue<D, SI>[];
}
```

### Properties

- **actionable** (boolean): Indicates if the tooltip has interactive actions.
- **backgroundColor** (string): The background color of the tooltip.
- **canPinTooltip** (boolean): Whether the tooltip can be pinned.
- **dir** ('rtl' | 'ltr'): The text directionality.
- **maxItems** (number): The maximum number of items allowed in the tooltip.
- **pinned** (boolean): Whether the tooltip is currently pinned.
- **pinTooltip** (PinTooltipCallback): A callback function to pin or unpin the tooltip.
- **selected** (Array<TooltipValue<D, SI>>): The currently selected tooltip values.
- **setSelection** (CustomTooltipProps['setSelection']): A function to programmatically set the tooltip selection.
- **theme** (TooltipStyle): The current theme applied to the tooltip.
- **toggleSelected** (CustomTooltipProps['toggleSelected']): A function to toggle the selection state of a tooltip item.
- **values** (TooltipValue<D, SI>[]): The array of data values displayed in the tooltip.
```

--------------------------------

### Animation Configuration

Source: https://github.com/elastic/elastic-charts/blob/main/packages/charts/api/charts.api.md

Specifies how animations are configured, including options for duration, delay, and triggering.

```APIDOC
## Types

### AnimationConfig<T extends string>

Configuration for animations, including optional settings and a trigger.

- **options**: `AnimationOptions` - Optional animation settings.
- **trigger**: `T` - The event that triggers the animation.

### AnimationOptions

Options that can be applied to animations.

- **delay**: `TimeMs | AnimationSpeed` - Delay before the animation starts.
- **duration**: `TimeMs | AnimationSpeed` - Duration of the animation.
- **enabled**: `boolean` - Whether the animation is enabled.
- **initialValue**: `AnimatedValue` - The starting value for the animation.
- **snapValues**: `AnimatedValue[]` - Values to which the animation can snap.
- **timeFunction**: `TimeFunction` - The timing function for the animation.

### AnimationSpeed

Predefined speeds for animations.

- **extraFast**: `90`
- **fast**: `150`
- **normal**: `250`
- **slow**: `350`
- **extraSlow**: `500`
```

--------------------------------

### Trigger VRT Screenshot Update with Comment

Source: https://github.com/elastic/elastic-charts/wiki/Continuous-integration

Use specific phrases in comments to restart the current build and run Playwright tests in update mode for VRT screenshots.

```text
buildkite update screenshots
```

```text
buildkite update vrt
```

--------------------------------

### Skip CI Build with Label

Source: https://github.com/elastic/elastic-charts/wiki/Continuous-integration

Apply the `ci:skip` label to a pull request to prevent Buildkite builds from running. This is an alternative to using a commit message.

```github
ci:skip
```

--------------------------------

### Merge Partial Theme with Default Theme

Source: https://github.com/elastic/elastic-charts/wiki/Theming

Extend an existing theme by creating a partial theme object and merging it with a default theme using `mergeWithDefaultTheme`. This ensures a valid Theme object.

```javascript
const customTheme = mergeWithDefaultTheme(partialTheme, existingTheme);
```

--------------------------------

### AnimationOptions Interface

Source: https://github.com/elastic/elastic-charts/blob/main/packages/charts/src/chart_types/xy_chart/renderer/canvas/animations/README.md

Defines the available options for configuring animations, including enabling animations, setting initial values, delays, snap-back behavior, time functions, and duration.

```typescript
export interface AnimationOptions {
  /**
   * Enables animations on annotations
   */
  enabled?: boolean;
  /**
   * Set initial value for initial render animations.
   * By default, the initial value is determined on the initial render
   * then animates any change thereafter.
   *
   * @example
   * ```ts
   * // Initially animates the height from 0 to 100 with no value change
   * atx.getValue('bar-height', 100, { initialValue: 0 })
   * ```
   */
  initialValue?: AnimatedValue;
  /**
   * start delay in ms
   */
  delay?: TimeMs | AnimationSpeed;
  /**
   * Snaps back to initial value instantly
   */
  snapValues?: AnimatedValue[];
  /**
   * The speed curve of the animation
   */
  timeFunction?: TimeFunction;
  /**
   * Duration from start of animation to completion in ms
   */
  duration?: TimeMs | AnimationSpeed;
}
```

--------------------------------

### PartialTheme Interface

Source: https://github.com/elastic/elastic-charts/blob/main/packages/charts/api/charts.api.md

Represents a partial theme object, allowing for optional theme properties.

```APIDOC
## export type PartialTheme = RecursivePartial<Theme>;

### Description
Defines a type for a partial theme object. It uses `RecursivePartial` to indicate that all properties within the `Theme` type, including nested ones, are optional.

### Type
A recursive partial application of the `Theme` type.
```

--------------------------------

### useTooltipContext

Source: https://github.com/elastic/elastic-charts/blob/main/packages/charts/api/charts.api.md

A React hook to access the tooltip context, providing data and state related to tooltips. It is generic and can be used with different data and series identifier types.

```APIDOC
## useTooltipContext

### Description

Accesses the current tooltip context.

### Type Parameters

- **D**: Type of the data points, extending `BaseDatum`.
- **SI**: Type of the series identifier, extending `SeriesIdentifier`.

### Returns

The tooltip context object.
```

--------------------------------

### Animate a Value with AnimationContext

Source: https://github.com/elastic/elastic-charts/blob/main/packages/charts/src/chart_types/xy_chart/renderer/canvas/animations/README.md

Demonstrates how to animate a numerical value within the render function using aCtx.getValue, providing animation options and a unique key for tracking.

```tsx
function render(aCtx: AnimationContext) {
  withContext(ctx, () => {
    const computedOpacity = randomValue(0, 1); // random value from 0 to 1
    const opacity = aCtx.getValue({ delay: 50, duration: 200, timeFunction: 'linear' })('my-opacity', computedOpacity);

    renderRect(opacity); // renders rect with tweened opacity value
  }
}
```

--------------------------------

### Goal Chart Component (Alpha)

Source: https://github.com/elastic/elastic-charts/blob/main/packages/charts/api/charts.api.md

Represents a Goal chart component (currently in alpha). It accepts a props object for configuration.

```APIDOC
## Goal

### Description
Component for rendering a Goal chart (alpha).

### Signature
```typescript
const Goal: (props: SFProps<GoalSpec, keyof (typeof buildProps_10)['overrides'], keyof (typeof buildProps_10)['defaults'], keyof (typeof buildProps_10)['optionals'], keyof (typeof buildProps_10)['requires']>) => null;
```

### Parameters
- **props** (SFProps<GoalSpec, ...>) - Configuration object for the Goal chart.
```

--------------------------------

### AreaSeries Configuration

Source: https://github.com/elastic/elastic-charts/blob/main/docs/docs/api/specs/xy/area_series.mdx

Configuration options for the AreaSeries, including inherited props and specific settings.

```APIDOC
## AreaSeries Configuration

### Description
Defines a area series in the chart. It can be used multiple times and is compatible with various global and specific specs.

### Inherited Props
- [`BasicSeriesSpec`](../types/BasicSeriesSpec) Props
- [`HistogramConfig`](../types/HistogramConfig) Props
- [`Postfixes`](../types/Postfixes) Props

### Specific Props
- `curve` (curve?: CurveType) - The type of interpolator to be used to interpolate values between points.
- `areaSeriesStyle` (areaSeriesStyle?: RecursivePartial<AreaSeriesStyle>) - Style configurations for the area series.
- `stackMode` (stackMode?: StackMode) - Stack each series using a specific mode: Percentage, Wiggle, Silhouette. The last two modes are generally used for stream graphs.
- `pointStyleAccessor` (pointStyleAccessor?: PointStyleAccessor) - An optional functional accessor to return custom color or style for point datum.
- `fit` (fit?: Exclude<Fit, 'explicit'> | FitConfig) - Fit config to fill `null` values in dataset.
```

--------------------------------

### PointStyle

Source: https://github.com/elastic/elastic-charts/blob/main/packages/charts/api/charts.api.md

Defines the visual styling for data points, including color, opacity, shape, and stroke properties.

```APIDOC
## PointStyle

### Description
Configuration object for styling individual data points, controlling their appearance like shape, size, color, and visibility.

### Fields
- **dimmed** ({ opacity: number } | { fill: Color | ColorVariant; stroke: Color | ColorVariant }): Styling for dimmed points.
- **fill** (Color | ColorVariant): The fill color of the point.
- **focused** ({ strokeWidth: number }): Styling for focused points.
- **opacity** (number): The opacity of the point (0 to 1).
- **radius** (Pixels): The radius of the point in pixels.
- **shape** (PointShape): The shape of the point.
- **stroke** (Color | ColorVariant): The stroke color of the point.
- **strokeWidth** (Pixels): The width of the point's stroke.
- **visible** ('never' | 'always' | 'auto'): Controls the visibility of the point.

### Type Definition
```typescript
export interface PointStyle {
    dimmed: { opacity: number } | { fill: Color | ColorVariant; stroke: Color | ColorVariant };
    fill?: Color | ColorVariant;
    focused?: { strokeWidth: number };
    opacity: number;
    radius: Pixels;
    shape?: PointShape;
    stroke?: Color | ColorVariant;
    strokeWidth: number;
    visible: 'never' | 'always' | 'auto';
}
```
```

--------------------------------

### Partition Spec Configuration

Source: https://github.com/elastic/elastic-charts/blob/main/docs/docs/api/specs/partition.mdx

Configuration options for the Partition spec, including data, formatting, layout, and visual properties.

```APIDOC
## Partition Spec Configuration

### Description
Configuration options for the Partition spec, including data, formatting, layout, and visual properties.

### Props

#### `data`
- Type: `data: D[]`
- Description: The input data for the chart.

#### `valueAccessor`
- Type: `valueAccessor?: ValueAccessor<D>`
- Default: `(d) => (typeof d === 'number' ? d : 0)`
- Description: Accessor function to retrieve the value from data points.

#### `valueFormatter`
- Type: `valueFormatter?: ValueFormatter`
- Default: `(d) => String(d)`
- Description: Formatter function for displaying values.

#### `valueGetter`
- Type: `valueGetter?: ValueGetter`
- Default: `(n) => n[AGGREGATE_KEY]`
- Description: Getter function to retrieve the value from aggregated data.

#### `percentFormatter`
- Type: `percentFormatter: ValueFormatter`
- Description: Formatter function for displaying percentages.

#### `topGroove`
- Type: `topGroove: Pixels`
- Default: `20`
- Description: The size of the top groove in pixels.

#### `smallMultiples`
- Type: `smallMultiples?: string | null`
- Default: `__global__small_multiples___`
- Description: Configuration for small multiples.

#### `layers`
- Type: `layers?: Layer<D>[]`
- Description: Defines the layers for the partition chart.

#### `clockwiseSectors`
- Type: `clockwiseSectors?: boolean`
- Default: `true`
- Description: Positions largest to smallest sectors in a clockwise order.

#### `specialFirstInnermostSector`
- Type: `specialFirstInnermostSector?: boolean`
- Default: `true`
- Description: Starts placement with the second largest slice for the innermost pie/ring.

#### `layout`
- Type: `layout: PartitionLayout`
- Description: The layout algorithm for the partition chart.

#### `maxRowCount`
- Type: `maxRowCount?: number`
- Default: `12`
- Description: The maximum number of rows to display.

#### `drilldown`
- Type: `drilldown?: boolean`
- Tag: `@alpha`
- Default: `false`
- Description: Enables drilldown functionality.

#### `fillOutside`
- Type: `fillOutside?: boolean`
- Default: `false`
- Description: Fills the area outside the main chart.

#### `radiusOutside`
- Type: `radiusOutside?: Radius`
- Default: `128`
- Description: The radius for the outside area.

#### `fillRectangleWidth`
- Type: `fillRectangleWidth?: Distance`
- Default: `Infinity`
- Description: The width of the fill rectangle.

#### `fillRectangleHeight`
- Type: `fillRectangleHeight?: Distance`
- Default: `Infinity`
- Description: The height of the fill rectangle.

### Inherited Props

- [`Spec`](./types/Spec) Props
- [`LegacyAnimationConfig`](/all-types/interfaces/LegacyAnimationConfig) Props
```

--------------------------------

### Bubble Series Configuration

Source: https://github.com/elastic/elastic-charts/blob/main/docs/docs/api/specs/xy/bubble_series.mdx

Configuration options for the Bubble Series, including inherited props and specific bubble series styles.

```APIDOC
## Bubble Series Configuration

### Description
Defines a bubble series in the chart. This spec can be used multiple times and is compatible with various global and other series specs.

### Props

#### Inherited Props
- [`BasicSeriesSpec`](../types/BasicSeriesSpec) props are inherited.

#### Specific Props
- `bubbleSeriesStyle` (RecursivePartial<BubbleSeriesStyle>): Optional configuration for the bubble series' visual style.
- `pointStyleAccessor` (PointStyleAccessor): An optional functional accessor to return custom color or style for each point datum.
```

--------------------------------

### Configure Partition Node Label

Source: https://github.com/elastic/elastic-charts/wiki/Tooltip

Defines how node labels are formatted in Partition charts using the nodeLabel prop.

```tsx
<Partition layers={[{ nodeLabel: (d) => `${d}` }]} />
```

--------------------------------

### AnnotationPortalSettings Props

Source: https://github.com/elastic/elastic-charts/blob/main/docs/docs/api/specs/types/annotation_portal_settings.mdx

Defines the properties available for customizing annotation tooltips. This includes inheriting settings from TooltipPortalSettings and defining custom tooltip components.

```APIDOC
## AnnotationPortalSettings

Portal settings for annotation tooltips

### Props

#### Inherited Props

- [`TooltipPortalSettings`](/all-types/interfaces/TooltipPortalSettings) Props: Inherits all props from `TooltipPortalSettings`.

#### Custom Props

- `customTooltip` (CustomAnnotationTooltip) - Optional: A React component to render a custom tooltip.
- `customTooltipDetails` (AnnotationTooltipFormatter) - Optional: A React component to render custom tooltip details.
```

--------------------------------

### Import Elastic Charts Sass

Source: https://github.com/elastic/elastic-charts/wiki/Consuming-@elastic-charts

Import Elastic Charts Sass files directly if your project already compiles EUI's Sass. Ensure this import comes after EUI's Sass.

```scss
@import './node_modules/@elastic/charts/theme.scss';
```