# Heatmap order and Gauge options

These examples target the current public WestCoast Charts **1.1.x** release line. They make two existing conventions explicit; they do not change the defaults or add a new configuration namespace.

## Heatmap: choose the visible row order

The default heatmap places the first input series at the **bottom**. Set `yaxis.reversed: true` when your input is already ordered from top to bottom. Keep the series and their values together; reversing only the labels would misidentify the rows.

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

const chart = new WestCoastCharts(document.querySelector('#chart'), {
  chart: { type: 'heatmap', height: 300 },
  series: [
    { name: 'Intake', data: [{ x: '09:00', y: 12 }, { x: '10:00', y: 18 }] },
    { name: 'Treatment', data: [{ x: '09:00', y: 8 }, { x: '10:00', y: 14 }] }
  ],
  yaxis: { reversed: true }
})
await chart.render()
```

Expected top-to-bottom order: **Intake, Treatment**. With `reversed: false`, it is **Treatment, Intake**. This controls row presentation; it does not invert the numeric meaning of the heatmap colour scale.

## Gauge: register the type, configure radialBar

`gauge` is an optional free type. Its options live under **`plotOptions.radialBar`**, because it uses the radialBar configuration and renderer family. There is no `plotOptions.gauge` alias in the current 1.1.x line. This compatibility convention can be surprising; use the working namespace below rather than guessing an alias.

```js
import WestCoastCharts from 'west-coast-charts'
import gauge from 'west-coast-charts/types/gauge'
WestCoastCharts.use(gauge)

const chart = new WestCoastCharts(document.querySelector('#chart'), {
  chart: { type: 'gauge', height: 320 },
  series: [180],
  labels: ['Flow, m³/h'],
  plotOptions: {
    radialBar: {
      min: 0, max: 240,
      startAngle: -135, endAngle: 135,
      shape: 'needle',
      ticks: { show: true, major: { count: 5 } },
      dataLabels: { value: { formatter: value => `${value} m³/h` } }
    }
  }
})
await chart.render()
```

The visible value is **180 on a 0–240 domain**, not 180 percent. The explicit formatter adds its unit to the visible label and data table. In 1.1.1, the initial screen-reader overview could announce a percent suffix on a custom domain. This was fixed in 1.1.2 by formatting the overview with the same domain-aware gauge value formatter used for the visible label and data table. After normalization, `chart.w.config.chart.type` is `radialBar` and `chart.w.config.chart.requestedType` is `gauge`.

Changing default row order would break existing heatmaps. A future alias would require type declarations, validation, conflict precedence and equivalence tests, followed by the appropriate versioned release. No new alias is claimed by these instructions.

[Options reference](/docs/reference/options/) · [Selective loading and sizes](/docs/loading/) · [Getting started](/docs/getting-started/)