Negative values

Net change per hour: losses grow inward from the zero ring, coloured by value.

Series, gauge & live

Chart type: Radial Column radialColumn
Tier: Premium
Collection: Radial Column · Series, gauge & live
Render: Live, site theme

LIVE/radial-column/negative8 of 32 in Radial Column

Open the chart without page chrome ↗Drawing width at least 760 px. Scroll within the chart on smaller screens.

Configuration

const options = {
  "chart": {
    "type": "radialColumn",
    "height": 460,
    "toolbar": {
      "show": false
    }
  },
  "series": [
    {
      "name": "Net change",
      "data": [
        12,
        18,
        -6,
        24,
        31,
        -14,
        -22,
        8,
        15,
        -9,
        27,
        35,
        -4,
        19,
        22,
        -17,
        11,
        28,
        -12,
        6,
        14,
        -3,
        20,
        26
      ]
    }
  ],
  "xaxis": {
    "categories": [
      "00:00",
      "01:00",
      "02:00",
      "03:00",
      "04:00",
      "05:00",
      "06:00",
      "07:00",
      "08:00",
      "09:00",
      "10:00",
      "11:00",
      "12:00",
      "13:00",
      "14:00",
      "15:00",
      "16:00",
      "17:00",
      "18:00",
      "19:00",
      "20:00",
      "21:00",
      "22:00",
      "23:00"
    ]
  },
  "plotOptions": {
    "radialColumn": {
      "fill": {
        "type": "value",
        "stops": [
          "#f43f5e",
          "#94a3b8",
          "#22c55e"
        ]
      }
    }
  }
}

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

01 · Speccomplete, runnable

import WestCoastCharts from 'west-coast-charts'
import premium from 'west-coast-charts/premium'

WestCoastCharts.use(premium)
const WestCoastChartsPremium = premium
WestCoastCharts.setLicenseKey(LICENCE_KEY) // paid production licence; localhost evaluation needs no key

const options = {
  "chart": {
    "type": "radialColumn",
    "height": 460,
    "toolbar": {
      "show": false
    }
  },
  "series": [
    {
      "name": "Net change",
      "data": [
        12,
        18,
        -6,
        24,
        31,
        -14,
        -22,
        8,
        15,
        -9,
        27,
        35,
        -4,
        19,
        22,
        -17,
        11,
        28,
        -12,
        6,
        14,
        -3,
        20,
        26
      ]
    }
  ],
  "xaxis": {
    "categories": [
      "00:00",
      "01:00",
      "02:00",
      "03:00",
      "04:00",
      "05:00",
      "06:00",
      "07:00",
      "08:00",
      "09:00",
      "10:00",
      "11:00",
      "12:00",
      "13:00",
      "14:00",
      "15:00",
      "16:00",
      "17:00",
      "18:00",
      "19:00",
      "20:00",
      "21:00",
      "22:00",
      "23:00"
    ]
  },
  "plotOptions": {
    "radialColumn": {
      "fill": {
        "type": "value",
        "stops": [
          "#f43f5e",
          "#94a3b8",
          "#22c55e"
        ]
      }
    }
  }
}

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

02 · Rendered state

Waiting for the chart.

Open Data & agent view to read this chart through chart.describe().

Read from the running library through its optional agent/describe module. Text, table and JSON share the same snapshot. Demo data only.

03 · CLIPublic tools

$ wcc chart export radial-column-negative.json --out radial-column-negative.svg --with-table

Public agent tools 0.2.3, tested with Library 1.1.5; available from the versioned GitHub release and npm. Save a JSON spec first and check the loaded runtime and supported modules before rendering. Command reference

04 · Markdown/gallery/radial-column/negative/index.md

Loading /gallery/radial-column/negative/index.md …

This example uses Premium modules. Compare licences · Embedding in a distributed product?