Docs Charts Specialty

WordCloudChart

import { WordCloudChart } from "@grassroot/charts-react";
 
export default function WordCloudChartDemo() {
  return (
    <div>
      <WordCloudChart
        ariaLabel="Support ticket topics by volume across twenty-four themes, July 2026"
        words={[
          {
            text: "billing",
            value: 184,
          },
          {
            text: "login",
            value: 156,
          },
          {
            text: "delivery",
            value: 132,
          },
          {
            text: "refund",
            value: 104,
          },
          {
            text: "account",
            value: 91,
          },
          {
            text: "mobile",
            value: 78,
          },
          {
            text: "pricing",
            value: 64,
          },
          {
            text: "invoice",
            value: 52,
          },
          {
            text: "accessibility",
            value: 37,
          },
          {
            text: "checkout",
            value: 121,
          },
          {
            text: "password",
            value: 88,
          },
          {
            text: "shipping",
            value: 76,
          },
          {
            text: "promo",
            value: 59,
          },
          {
            text: "vat",
            value: 47,
          },
          {
            text: "webhook",
            value: 41,
          },
          {
            text: "sso",
            value: 36,
          },
          {
            text: "latency",
            value: 33,
          },
          {
            text: "export",
            value: 29,
          },
          {
            text: "gdpr",
            value: 26,
          },
          {
            text: "android",
            value: 24,
          },
          {
            text: "ios",
            value: 22,
          },
          {
            text: "csv",
            value: 18,
          },
          {
            text: "dark-mode",
            value: 15,
          },
          {
            text: "print",
            value: 12,
          },
        ]} />
    </div>
  );
}

<script setup lang="ts">
import { WordCloudChart } from "@grassroot/charts-vue";
</script>
 
<template>
  <WordCloudChart
    aria-label="Support ticket topics by volume across twenty-four themes, July 2026"
    :words="[
      {
        text: 'billing',
        value: 184,
      },
      {
        text: 'login',
        value: 156,
      },
      {
        text: 'delivery',
        value: 132,
      },
      {
        text: 'refund',
        value: 104,
      },
      {
        text: 'account',
        value: 91,
      },
      {
        text: 'mobile',
        value: 78,
      },
      {
        text: 'pricing',
        value: 64,
      },
      {
        text: 'invoice',
        value: 52,
      },
      {
        text: 'accessibility',
        value: 37,
      },
      {
        text: 'checkout',
        value: 121,
      },
      {
        text: 'password',
        value: 88,
      },
      {
        text: 'shipping',
        value: 76,
      },
      {
        text: 'promo',
        value: 59,
      },
      {
        text: 'vat',
        value: 47,
      },
      {
        text: 'webhook',
        value: 41,
      },
      {
        text: 'sso',
        value: 36,
      },
      {
        text: 'latency',
        value: 33,
      },
      {
        text: 'export',
        value: 29,
      },
      {
        text: 'gdpr',
        value: 26,
      },
      {
        text: 'android',
        value: 24,
      },
      {
        text: 'ios',
        value: 22,
      },
      {
        text: 'csv',
        value: 18,
      },
      {
        text: 'dark-mode',
        value: 15,
      },
      {
        text: 'print',
        value: 12,
      },
    ]" />
</template>

import { ChangeDetectionStrategy, Component } from "@angular/core";
import { GrassrootWordCloudChart } from "@grassroot/charts-angular";
 
@Component({
  selector: "app-word-cloud-chart-chart-demo",
  standalone: true,
  imports: [GrassrootWordCloudChart],
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `<grassroot-word-cloud-chart
    [ariaLabel]="'Support ticket topics by volume across twenty-four themes, July 2026'"
    [words]="[
      {
        text: 'billing',
        value: 184,
      },
      {
        text: 'login',
        value: 156,
      },
      {
        text: 'delivery',
        value: 132,
      },
      {
        text: 'refund',
        value: 104,
      },
      {
        text: 'account',
        value: 91,
      },
      {
        text: 'mobile',
        value: 78,
      },
      {
        text: 'pricing',
        value: 64,
      },
      {
        text: 'invoice',
        value: 52,
      },
      {
        text: 'accessibility',
        value: 37,
      },
      {
        text: 'checkout',
        value: 121,
      },
      {
        text: 'password',
        value: 88,
      },
      {
        text: 'shipping',
        value: 76,
      },
      {
        text: 'promo',
        value: 59,
      },
      {
        text: 'vat',
        value: 47,
      },
      {
        text: 'webhook',
        value: 41,
      },
      {
        text: 'sso',
        value: 36,
      },
      {
        text: 'latency',
        value: 33,
      },
      {
        text: 'export',
        value: 29,
      },
      {
        text: 'gdpr',
        value: 26,
      },
      {
        text: 'android',
        value: 24,
      },
      {
        text: 'ios',
        value: 22,
      },
      {
        text: 'csv',
        value: 18,
      },
      {
        text: 'dark-mode',
        value: 15,
      },
      {
        text: 'print',
        value: 12,
      },
    ]"
  />`,
})
export class WordCloudChartDemoComponent {
}
 
export default WordCloudChartDemoComponent;

<script lang="ts">
  import { WordCloudChart } from "@grassroot/charts-svelte";
</script>
 
<WordCloudChart
  ariaLabel="Support ticket topics by volume across twenty-four themes, July 2026"
  words={[
    {
      text: "billing",
      value: 184,
    },
    {
      text: "login",
      value: 156,
    },
    {
      text: "delivery",
      value: 132,
    },
    {
      text: "refund",
      value: 104,
    },
    {
      text: "account",
      value: 91,
    },
    {
      text: "mobile",
      value: 78,
    },
    {
      text: "pricing",
      value: 64,
    },
    {
      text: "invoice",
      value: 52,
    },
    {
      text: "accessibility",
      value: 37,
    },
    {
      text: "checkout",
      value: 121,
    },
    {
      text: "password",
      value: 88,
    },
    {
      text: "shipping",
      value: 76,
    },
    {
      text: "promo",
      value: 59,
    },
    {
      text: "vat",
      value: 47,
    },
    {
      text: "webhook",
      value: 41,
    },
    {
      text: "sso",
      value: 36,
    },
    {
      text: "latency",
      value: 33,
    },
    {
      text: "export",
      value: 29,
    },
    {
      text: "gdpr",
      value: 26,
    },
    {
      text: "android",
      value: 24,
    },
    {
      text: "ios",
      value: 22,
    },
    {
      text: "csv",
      value: 18,
    },
    {
      text: "dark-mode",
      value: 15,
    },
    {
      text: "print",
      value: 12,
    },
  ]} />

/** @jsxImportSource solid-js */
import { WordCloudChart } from "@grassroot/charts-solid";
 
export default function WordCloudChartDemo() {
  return (
    <WordCloudChart
      ariaLabel="Support ticket topics by volume across twenty-four themes, July 2026"
      words={[
        {
          text: "billing",
          value: 184,
        },
        {
          text: "login",
          value: 156,
        },
        {
          text: "delivery",
          value: 132,
        },
        {
          text: "refund",
          value: 104,
        },
        {
          text: "account",
          value: 91,
        },
        {
          text: "mobile",
          value: 78,
        },
        {
          text: "pricing",
          value: 64,
        },
        {
          text: "invoice",
          value: 52,
        },
        {
          text: "accessibility",
          value: 37,
        },
        {
          text: "checkout",
          value: 121,
        },
        {
          text: "password",
          value: 88,
        },
        {
          text: "shipping",
          value: 76,
        },
        {
          text: "promo",
          value: 59,
        },
        {
          text: "vat",
          value: 47,
        },
        {
          text: "webhook",
          value: 41,
        },
        {
          text: "sso",
          value: 36,
        },
        {
          text: "latency",
          value: 33,
        },
        {
          text: "export",
          value: 29,
        },
        {
          text: "gdpr",
          value: 26,
        },
        {
          text: "android",
          value: 24,
        },
        {
          text: "ios",
          value: 22,
        },
        {
          text: "csv",
          value: 18,
        },
        {
          text: "dark-mode",
          value: 15,
        },
        {
          text: "print",
          value: 12,
        },
      ]} />
  );
}

Installation

API Reference

Import

import { WordCloudChart } from "@grassroot/charts-react";

Props

Prop

Type

Default

Requirement

Description

words

readonly WordCloudDatum[]

—

required

—

legend

boolean | import("@grassroot/chart-spec").LegendConfig | undefined

—

optional

—

animation

boolean | import("./base").ExpandedChartAnimationConfig | undefined

—

optional

—

onHiddenSeriesChange

((ids: readonly string[]) => void) | undefined

—

optional

—

onActiveDatumChange

((id: string | null) => void) | undefined

—

optional

—

renderer

ChartRenderer | undefined

—

optional

—

className

string | undefined

—

optional

—

theme

import("@grassroot/theme").PartialChartTheme | undefined

—

optional

—

title

string | undefined

—

optional

—

description

string | undefined

—

optional

—

ariaLabel

string | undefined

—

optional

—

keyboardNavigation

boolean | undefined

—

optional

—

width

number | undefined

—

optional

—

Prop: words
Type: readonly WordCloudDatum[]
Default: —
Requirement: required
Description: —

Prop: legend
Type: boolean | import("@grassroot/chart-spec").LegendConfig | undefined
Default: —
Requirement: optional
Description: —

Prop: tooltip
Type: boolean | import("./base").ExpandedChartTooltipConfig<unknown> | undefined
Default: —
Requirement: optional
Description: —

Prop: animation
Type: boolean | import("./base").ExpandedChartAnimationConfig | undefined
Default: —
Requirement: optional
Description: —

Prop: onHiddenSeriesChange
Type: ((ids: readonly string[]) => void) | undefined
Default: —
Requirement: optional
Description: —

Prop: onActiveDatumChange
Type: ((id: string | null) => void) | undefined
Default: —
Requirement: optional
Description: —

Prop: renderer
Type: ChartRenderer | undefined
Default: —
Requirement: optional
Description: —

Prop: className
Type: string | undefined
Default: —
Requirement: optional
Description: —

Prop: theme
Type: import("@grassroot/theme").PartialChartTheme | undefined
Default: —
Requirement: optional
Description: —

Prop: title
Type: string | undefined
Default: —
Requirement: optional
Description: —

Prop: description
Type: string | undefined
Default: —
Requirement: optional
Description: —

Prop: ariaLabel
Type: string | undefined
Default: —
Requirement: optional
Description: —

Prop: keyboardNavigation
Type: boolean | undefined
Default: —
Requirement: optional
Description: —

Prop: width
Type: number | undefined
Default: —
Requirement: optional
Description: —

Prop: height
Type: number | undefined
Default: —
Requirement: optional
Description: —

Prop: gpuBackend
Type: ChartGpuBackend | undefined
Default: —
Requirement: optional
Description: —

Prop: rendererStrategy
Type: Partial<import("@grassroot/core").ChartRendererStrategy> | undefined
Default: —
Requirement: optional
Description: —

Prop: renderPlanMode
Type: "svg" | "host" | undefined
Default: —
Requirement: optional
Description: —

Prop: showGrid
Type: boolean | undefined
Default: —
Requirement: optional
Description: —

Prop: interactive
Type: boolean | undefined
Default: —
Requirement: optional
Description: Gates every pointer/keyboard interaction the shell owns (hit-test on pointer move, focus-to-first, arrow navigation, Escape) and, with `keyboardNavigation`, whether the plot surface is focusable at all.

Prop: hiddenSeries
Type: readonly string[] | undefined
Default: —
Requirement: optional
Description: —

Prop: defaultHiddenSeries
Type: readonly string[] | undefined
Default: —
Requirement: optional
Description: —

Prop: activeDatum
Type: string | null | undefined
Default: —
Requirement: optional
Description: —

Prop: defaultActiveDatum
Type: string | null | undefined
Default: —
Requirement: optional
Description: Uncontrolled initial value for the `activeDatum`/`onActiveDatumChange` pair.

Prop: speed
Type: number | undefined
Default: —
Requirement: optional
Description: Playback-speed multiplier for entrance/ambient motion.

Prop: morphDurationMs
Type: number | undefined
Default: —
Requirement: optional
Description: How long a dataset change tweens, in milliseconds.

Prop: replayToken
Type: string | number | undefined
Default: —
Requirement: optional
Description: Changing this value replays the entrance animation.

Events

Event	Payload
`onHiddenSeriesChange`	`((ids: readonly string[]) => void) \| undefined`
`onActiveDatumChange`	`((id: string \| null) => void) \| undefined`

Content regions

children
dataSummary

Native attributes

Standard DOM and ARIA attributes not listed above spread onto the root element.

Import

import { WordCloudChart } from "@grassroot/charts-vue";

Props

Prop

Type

Default

Requirement

className

string | undefined

—

optional

gpuBackend

"auto" | "webgpu" | "webgl2" | undefined

—

optional

width

number | undefined

—

optional

height

number | undefined

—

optional

renderer

ChartRenderer | undefined

—

optional

rendererStrategy

Partial<ChartRendererStrategy> | undefined

—

optional

renderPlanMode

"svg" | "host" | undefined

"host"

optional

showGrid

boolean | undefined

—

optional

legend

boolean | LegendConfig | undefined

false

optional

animation

ChartAnimationInput | undefined

—

optional

interactive

boolean | undefined

true

optional

keyboardNavigation

boolean | undefined

true

optional

hiddenSeries

readonly string[] | undefined

—

optional

Prop: className
Type: string | undefined
Default: —
Requirement: optional

Prop: gpuBackend
Type: "auto" | "webgpu" | "webgl2" | undefined
Default: —
Requirement: optional

Prop: width
Type: number | undefined
Default: —
Requirement: optional

Prop: height
Type: number | undefined
Default: —
Requirement: optional

Prop: renderer
Type: ChartRenderer | undefined
Default: —
Requirement: optional

Prop: rendererStrategy
Type: Partial<ChartRendererStrategy> | undefined
Default: —
Requirement: optional

Prop: renderPlanMode
Type: "svg" | "host" | undefined
Default: "host"
Requirement: optional

Prop: showGrid
Type: boolean | undefined
Default: —
Requirement: optional

Prop: legend
Type: boolean | LegendConfig | undefined
Default: false
Requirement: optional

Prop: tooltip
Type: boolean | TooltipBehaviorConfig | undefined
Default: true
Requirement: optional

Prop: animation
Type: ChartAnimationInput | undefined
Default: —
Requirement: optional

Prop: interactive
Type: boolean | undefined
Default: true
Requirement: optional

Prop: keyboardNavigation
Type: boolean | undefined
Default: true
Requirement: optional

Prop: hiddenSeries
Type: readonly string[] | undefined
Default: —
Requirement: optional

Prop: defaultHiddenSeries
Type: readonly string[] | undefined
Default: () => []
Requirement: optional

Prop: activeDatum
Type: string | null | undefined
Default: —
Requirement: optional

Prop: defaultActiveDatum
Type: string | null | undefined
Default: —
Requirement: optional

Prop: speed
Type: number | undefined
Default: —
Requirement: optional

Prop: morphDurationMs
Type: number | undefined
Default: —
Requirement: optional

Prop: replayToken
Type: string | number | undefined
Default: —
Requirement: optional

Prop: theme
Type: PartialChartTheme | undefined
Default: —
Requirement: optional

Prop: title
Type: string | undefined
Default: —
Requirement: optional

Prop: description
Type: string | undefined
Default: —
Requirement: optional

Prop: ariaLabel
Type: string | undefined
Default: —
Requirement: optional

Prop: words
Type: readonly WordCloudDatum[]
Default: —
Requirement: required

Events

Event	Payload
`hiddenSeriesChange`	`[ids: readonly string[]]`
`activeDatumChange`	`[id: string \| null]`

Content regions

dataSummary
default

Import

import { ChangeDetectionStrategy, Component } from "@angular/core";
import { GrassrootWordCloudChart } from "@grassroot/charts-angular";

Props

Prop

Type

Default

Requirement

renderer

ChartRenderer

—

optional

gpuBackend

ChartGpuBackend

—

optional

rendererStrategy

Partial<ChartRendererStrategy>

—

optional

renderPlanMode

"svg" | "host"

"host"

optional

ariaLabel

string

—

optional

title

string

—

optional

description

string

—

optional

theme

PartialChartTheme

—

optional

animation

ChartAnimationInput

—

optional

interactive

boolean

true

optional

keyboardNavigation

boolean

true

optional

legend

boolean | LegendConfig

—

optional

hiddenSeries

readonly string[]

—

optional

Prop: renderer
Type: ChartRenderer
Default: —
Requirement: optional

Prop: gpuBackend
Type: ChartGpuBackend
Default: —
Requirement: optional

Prop: rendererStrategy
Type: Partial<ChartRendererStrategy>
Default: —
Requirement: optional

Prop: renderPlanMode
Type: "svg" | "host"
Default: "host"
Requirement: optional

Prop: ariaLabel
Type: string
Default: —
Requirement: optional

Prop: title
Type: string
Default: —
Requirement: optional

Prop: description
Type: string
Default: —
Requirement: optional

Prop: theme
Type: PartialChartTheme
Default: —
Requirement: optional

Prop: animation
Type: ChartAnimationInput
Default: —
Requirement: optional

Prop: interactive
Type: boolean
Default: true
Requirement: optional

Prop: keyboardNavigation
Type: boolean
Default: true
Requirement: optional

Prop: tooltip
Type: boolean | TooltipBehaviorConfig
Default: true
Requirement: optional

Prop: legend
Type: boolean | LegendConfig
Default: —
Requirement: optional

Prop: hiddenSeries
Type: readonly string[]
Default: —
Requirement: optional

Prop: defaultHiddenSeries
Type: readonly string[]
Default: []
Requirement: optional

Prop: activeDatum
Type: string | null
Default: —
Requirement: optional

Prop: defaultActiveDatum
Type: string | null
Default: null
Requirement: optional

Prop: speed
Type: number
Default: —
Requirement: optional

Prop: morphDurationMs
Type: number
Default: —
Requirement: optional

Prop: replayToken
Type: string | number
Default: —
Requirement: optional

Prop: words
Type: readonly WordCloudDatum[]
Default: —
Requirement: required

Prop: width
Type: number
Default: —
Requirement: optional

Prop: height
Type: number
Default: —
Requirement: optional

Prop: showGrid
Type: boolean
Default: —
Requirement: optional

Prop: className
Type: string
Default: —
Requirement: optional

Events

Event	Payload
`activeDatumChange`	`string \| null`
`hiddenSeriesChange`	`readonly string[]`

Content regions

dataSummary
default

Import

import { WordCloudChart } from "@grassroot/charts-svelte";

Props

Prop

Type

Default

Requirement

words

readonly WordCloudDatum[]

—

required

onHiddenSeriesChange

(ids: readonly string[]) => void

—

optional

onActiveDatumChange

(id: string | null) => void

—

optional

class

string

—

optional

style

string

—

optional

width

number

—

optional

height

number

—

optional

renderer

ChartRenderer

—

optional

gpuBackend

ChartGpuBackend

—

optional

rendererStrategy

Partial<ChartRendererStrategy>

—

optional

renderPlanMode

"svg" | "host"

"host"

optional

showGrid

boolean

—

optional

legend

boolean | LegendConfig

false

optional

Prop: words
Type: readonly WordCloudDatum[]
Default: —
Requirement: required

Prop: onHiddenSeriesChange
Type: (ids: readonly string[]) => void
Default: —
Requirement: optional

Prop: onActiveDatumChange
Type: (id: string | null) => void
Default: —
Requirement: optional

Prop: class
Type: string
Default: —
Requirement: optional

Prop: style
Type: string
Default: —
Requirement: optional

Prop: width
Type: number
Default: —
Requirement: optional

Prop: height
Type: number
Default: —
Requirement: optional

Prop: renderer
Type: ChartRenderer
Default: —
Requirement: optional

Prop: gpuBackend
Type: ChartGpuBackend
Default: —
Requirement: optional

Prop: rendererStrategy
Type: Partial<ChartRendererStrategy>
Default: —
Requirement: optional

Prop: renderPlanMode
Type: "svg" | "host"
Default: "host"
Requirement: optional

Prop: showGrid
Type: boolean
Default: —
Requirement: optional

Prop: legend
Type: boolean | LegendConfig
Default: false
Requirement: optional

Prop: tooltip
Type: boolean | TooltipBehaviorConfig
Default: true
Requirement: optional

Prop: animation
Type: ChartAnimationInput
Default: —
Requirement: optional

Prop: interactive
Type: boolean
Default: true
Requirement: optional

Prop: keyboardNavigation
Type: boolean
Default: true
Requirement: optional

Prop: hiddenSeries
Type: readonly string[]
Default: —
Requirement: optional

Prop: defaultHiddenSeries
Type: readonly string[]
Default: —
Requirement: optional

Prop: activeDatum
Type: string | null
Default: —
Requirement: optional

Prop: defaultActiveDatum
Type: string | null
Default: —
Requirement: optional

Prop: speed
Type: number
Default: —
Requirement: optional

Prop: morphDurationMs
Type: number
Default: —
Requirement: optional

Prop: replayToken
Type: string | number
Default: —
Requirement: optional

Prop: theme
Type: PartialChartTheme
Default: —
Requirement: optional

Prop: title
Type: string
Default: —
Requirement: optional

Prop: description
Type: string
Default: —
Requirement: optional

Prop: ariaLabel
Type: string
Default: —
Requirement: optional

Events

Event	Payload
`onHiddenSeriesChange`	`(ids: readonly string[]) => void`
`onActiveDatumChange`	`(id: string \| null) => void`

Content regions

children
dataSummary

Import

import { WordCloudChart } from "@grassroot/charts-solid";

Props

Prop

Type

Default

Requirement

words

readonly WordCloudDatum[]

—

required

onActiveDatumChange

(id: string | null) => void

—

optional

onHiddenSeriesChange

(ids: readonly string[]) => void

—

optional

class

string

—

optional

style

JSX.CSSProperties

—

optional

width

number

—

optional

height

number

—

optional

renderer

ChartRenderer

—

optional

gpuBackend

ChartGpuBackend

"auto"

optional

rendererStrategy

Partial<ChartRendererStrategy>

—

optional

renderPlanMode

"svg" | "host"

"host"

optional

showGrid

boolean

—

optional

legend

boolean | LegendConfig

—

optional

Prop: words
Type: readonly WordCloudDatum[]
Default: —
Requirement: required

Prop: onActiveDatumChange
Type: (id: string | null) => void
Default: —
Requirement: optional

Prop: onHiddenSeriesChange
Type: (ids: readonly string[]) => void
Default: —
Requirement: optional

Prop: class
Type: string
Default: —
Requirement: optional

Prop: style
Type: JSX.CSSProperties
Default: —
Requirement: optional

Prop: width
Type: number
Default: —
Requirement: optional

Prop: height
Type: number
Default: —
Requirement: optional

Prop: renderer
Type: ChartRenderer
Default: —
Requirement: optional

Prop: gpuBackend
Type: ChartGpuBackend
Default: "auto"
Requirement: optional

Prop: rendererStrategy
Type: Partial<ChartRendererStrategy>
Default: —
Requirement: optional

Prop: renderPlanMode
Type: "svg" | "host"
Default: "host"
Requirement: optional

Prop: showGrid
Type: boolean
Default: —
Requirement: optional

Prop: legend
Type: boolean | LegendConfig
Default: —
Requirement: optional

Prop: tooltip
Type: boolean | TooltipBehaviorConfig
Default: —
Requirement: optional

Prop: animation
Type: ChartAnimationInput
Default: —
Requirement: optional

Prop: interactive
Type: boolean
Default: —
Requirement: optional

Prop: keyboardNavigation
Type: boolean
Default: —
Requirement: optional

Prop: hiddenSeries
Type: readonly string[]
Default: —
Requirement: optional

Prop: defaultHiddenSeries
Type: readonly string[]
Default: —
Requirement: optional

Prop: activeDatum
Type: string | null
Default: —
Requirement: optional

Prop: defaultActiveDatum
Type: string | null
Default: —
Requirement: optional

Prop: speed
Type: number
Default: —
Requirement: optional

Prop: morphDurationMs
Type: number
Default: —
Requirement: optional

Prop: replayToken
Type: string | number
Default: —
Requirement: optional

Prop: theme
Type: PartialChartTheme
Default: —
Requirement: optional

Prop: title
Type: string
Default: —
Requirement: optional

Prop: description
Type: string
Default: —
Requirement: optional

Prop: ariaLabel
Type: string
Default: —
Requirement: optional

Events

Event	Payload
`onActiveDatumChange`	`(id: string \| null) => void`
`onHiddenSeriesChange`	`(ids: readonly string[]) => void`

Content regions

children
dataSummary