# Response times (Unit example)

> WestCoast Charts 1.1.5, release, public Core release, on npm. HTML: https://westcoast-charts.com/gallery/unit/response-times/ · Index for agents: https://westcoast-charts.com/llms.txt

Each ticket is a dot on a real time axis, swarmed per channel.

Why it matters: unit marks on a real value axis with swarm anti-overlap lanes, formatted ticks and axis title

- Chart type: `unit` (Unit)
- Collection: Unit · Unit & pictogram
- Raw configuration: https://westcoast-charts.com/gallery-src/unit/response-times.js
- Standalone example: https://westcoast-charts.com/embed/samples/wcc/gallery/unit/response-times.html

## Setup

```js
import WestCoastCharts from 'west-coast-charts'
import types from 'west-coast-charts/types'

WestCoastCharts.use(types)
```

## Options

```js
const options = {
  chart: {
    height: 380,
    fontFamily: "Inter, Geist, \"IBM Plex Sans\", system-ui, sans-serif",
    type: "unit",
    toolbar: {
      show: false
    }
  },
  series: [
    {
      name: "Chat",
      data: [
        {
          x: 1.5
        },
        {
          x: 1.5
        },
        {
          x: 5.4
        },
        {
          x: 1.3
        },
        {
          x: 3.5
        },
        {
          x: 0.9
        },
        {
          x: 0.5
        },
        {
          x: 1.2
        },
        {
          x: 1.7
        },
        {
          x: 1.7
        },
        {
          x: 1.4
        },
        {
          x: 2
        },
        {
          x: 5.2
        },
        {
          x: 3.2
        },
        {
          x: 1.2
        },
        {
          x: 4.8
        },
        {
          x: 3
        },
        {
          x: 3.8
        },
        {
          x: 1.2
        },
        {
          x: 0.6
        },
        {
          x: 3.1
        },
        {
          x: 1.1
        },
        {
          x: 1.4
        },
        {
          x: 3.2
        },
        {
          x: 1.4
        },
        {
          x: 1.3
        },
        {
          x: 2.8
        },
        {
          x: 2
        },
        {
          x: 1.5
        },
        {
          x: 1.5
        },
        {
          x: 2.6
        },
        {
          x: 2.3
        },
        {
          x: 2
        },
        {
          x: 2.5
        },
        {
          x: 2.4
        },
        {
          x: 1
        },
        {
          x: 1.1
        },
        {
          x: 1.4
        },
        {
          x: 1.9
        },
        {
          x: 1.3
        },
        {
          x: 2.1
        },
        {
          x: 1.5
        },
        {
          x: 1.6
        },
        {
          x: 1.6
        },
        {
          x: 1.4
        },
        {
          x: 0.8
        },
        {
          x: 3.9
        },
        {
          x: 1.1
        },
        {
          x: 1.2
        },
        {
          x: 1.3
        },
        {
          x: 2
        },
        {
          x: 1.8
        },
        {
          x: 2.1
        },
        {
          x: 1.6
        },
        {
          x: 1.3
        },
        {
          x: 0.7
        },
        {
          x: 3.2
        },
        {
          x: 3.3
        },
        {
          x: 2
        },
        {
          x: 1.5
        },
        {
          x: 1.1
        },
        {
          x: 4.3
        },
        {
          x: 2.3
        },
        {
          x: 2.9
        },
        {
          x: 4.8
        },
        {
          x: 2.7
        },
        {
          x: 0.6
        },
        {
          x: 0.7
        },
        {
          x: 3.2
        },
        {
          x: 1.6
        }
      ]
    },
    {
      name: "Email",
      data: [
        {
          x: 6.4
        },
        {
          x: 3.8
        },
        {
          x: 11.7
        },
        {
          x: 3.9
        },
        {
          x: 7.6
        },
        {
          x: 13.1
        },
        {
          x: 4.1
        },
        {
          x: 4.3
        },
        {
          x: 16.9
        },
        {
          x: 19.5
        },
        {
          x: 8.6
        },
        {
          x: 8.1
        },
        {
          x: 4.3
        },
        {
          x: 3.5
        },
        {
          x: 10.8
        },
        {
          x: 19.6
        },
        {
          x: 4.2
        },
        {
          x: 8.1
        },
        {
          x: 5.4
        },
        {
          x: 9
        },
        {
          x: 8.5
        },
        {
          x: 7.9
        },
        {
          x: 10.5
        },
        {
          x: 8.4
        },
        {
          x: 3.7
        },
        {
          x: 8.8
        },
        {
          x: 4.2
        },
        {
          x: 5.7
        },
        {
          x: 4.1
        },
        {
          x: 10.1
        },
        {
          x: 10.9
        },
        {
          x: 4.1
        },
        {
          x: 2.3
        },
        {
          x: 2.7
        },
        {
          x: 9.4
        },
        {
          x: 9.4
        },
        {
          x: 24.4
        },
        {
          x: 13
        },
        {
          x: 6.8
        },
        {
          x: 9
        },
        {
          x: 7.6
        },
        {
          x: 4.3
        },
        {
          x: 9
        },
        {
          x: 7.6
        },
        {
          x: 10
        },
        {
          x: 12.8
        },
        {
          x: 4.9
        },
        {
          x: 9.5
        },
        {
          x: 15.8
        },
        {
          x: 6.6
        },
        {
          x: 17.3
        },
        {
          x: 8.4
        },
        {
          x: 7.4
        },
        {
          x: 9.1
        },
        {
          x: 2.3
        },
        {
          x: 4.7
        },
        {
          x: 5.5
        },
        {
          x: 8.1
        },
        {
          x: 5.7
        },
        {
          x: 23.4
        },
        {
          x: 12.1
        },
        {
          x: 8.9
        },
        {
          x: 2.4
        },
        {
          x: 8.6
        },
        {
          x: 6.7
        },
        {
          x: 7
        },
        {
          x: 5.2
        },
        {
          x: 16.6
        },
        {
          x: 6.1
        },
        {
          x: 14
        }
      ]
    },
    {
      name: "Phone",
      data: [
        {
          x: 7.2
        },
        {
          x: 4.3
        },
        {
          x: 3.8
        },
        {
          x: 2.7
        },
        {
          x: 5.3
        },
        {
          x: 4.7
        },
        {
          x: 2.3
        },
        {
          x: 2.8
        },
        {
          x: 6.9
        },
        {
          x: 1.7
        },
        {
          x: 2.1
        },
        {
          x: 0.4
        },
        {
          x: 2
        },
        {
          x: 2.2
        },
        {
          x: 1.7
        },
        {
          x: 3.7
        },
        {
          x: 4.4
        },
        {
          x: 4.6
        },
        {
          x: 1.8
        },
        {
          x: 2.3
        },
        {
          x: 2.4
        },
        {
          x: 1.9
        },
        {
          x: 2.2
        },
        {
          x: 3.2
        },
        {
          x: 3
        },
        {
          x: 0.9
        },
        {
          x: 3.3
        },
        {
          x: 3.5
        },
        {
          x: 1.5
        },
        {
          x: 2.7
        },
        {
          x: 4.4
        },
        {
          x: 1.6
        },
        {
          x: 1.9
        },
        {
          x: 2.1
        },
        {
          x: 2.2
        },
        {
          x: 2.3
        },
        {
          x: 3.2
        },
        {
          x: 3.8
        },
        {
          x: 2.2
        },
        {
          x: 3.2
        },
        {
          x: 3.7
        },
        {
          x: 6.5
        },
        {
          x: 1.1
        },
        {
          x: 3.9
        },
        {
          x: 2
        },
        {
          x: 3.2
        },
        {
          x: 6
        },
        {
          x: 1.2
        },
        {
          x: 1.7
        },
        {
          x: 2.1
        },
        {
          x: 3.1
        },
        {
          x: 1.5
        },
        {
          x: 7
        },
        {
          x: 2.2
        },
        {
          x: 2.2
        },
        {
          x: 6.4
        },
        {
          x: 1.8
        },
        {
          x: 2.2
        },
        {
          x: 1.7
        },
        {
          x: 8.5
        },
        {
          x: 2.5
        },
        {
          x: 1.9
        },
        {
          x: 4.3
        },
        {
          x: 1.3
        },
        {
          x: 3.7
        },
        {
          x: 2.1
        },
        {
          x: 6.5
        },
        {
          x: 3.9
        },
        {
          x: 4.9
        },
        {
          x: 5.7
        }
      ]
    }
  ],
  plotOptions: {
    unit: {
      layout: "scatter",
      scatter: {
        y: "lanes",
        spread: "swarm",
        xTitle: "Hours to first response",
        xFormatter: (v) => v + ' h'
      }
    }
  },
  title: {
    text: "First response time by channel"
  },
  theme: {
    mode: "light",
    preset: "coastal"
  }
}

const chart = new WestCoastCharts(document.querySelector('#chart'), options)
await chart.render()
```

## Verify

- Text check (Library 1.1.5): load `west-coast-charts/agent/describe` and call `chart.describe({ format: "json" })` for the actual drawn state. The live reader is on this example’s HTML page.
- Command line (Public agent tools 0.2.3, tested with Library 1.1.5; available from the versioned GitHub release and npm, https://westcoast-charts.com/docs/cli/index.md): `wcc chart export unit-response-times.json --out unit-response-times.svg --with-table` (save the options above as JSON first)