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.

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.

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 · Selective loading and sizes · Getting started