# XWUIChartDumbbell

A dumbbell chart variant backed by `XWUIChart` that connects each category's two values with a line capped by a dot at either end, making the gap between a before and after (or A and B) easy to read across categories. Provide named `series` of `{ x, y }` points and choose a `block` (1-4) and `size` preset.

## Basic Usage

Two named monthly series (Series A and Series B), each spanning Jan through Jun, paired as dumbbells.

```example
file: examples/BasicUsage.ts
html: examples/BasicUsage.html
title: Basic Usage
description: Two six-month series rendered as a dumbbell chart at the md preset.
```

## 2019 vs 2024 Median Salary by Role

A dumbbell per role links its 2019 and 2024 median salary, so each bar's length is the five-year pay gap.

```example
file: examples/MedianSalaryByRole.ts
html: examples/MedianSalaryByRole.html
title: 2019 vs 2024 Median Salary by Role
description: Before/after salary for four roles at the lg preset with data labels and a legend.
```

## Before vs After Page Load (ms) by Page

Pre- and post-optimization load times per page, where the dumbbell's length is the performance win.

```example
file: examples/PageLoadBeforeAfter.ts
html: examples/PageLoadBeforeAfter.html
title: Before vs After Page Load (ms) by Page
description: Before/after load times for four pages with a " ms" unit and interactive hover.
```

```api
```