WordCloudChart

import { WordCloudChart } from "@grassroot/charts-react";
 
<WordCloudChart words={[{ text: "gpu", value: 14 }, { text: "fallback", value: 8 }, { text: "svg", value: 6 }]} />

<script setup lang="ts">
import { WordCloudChart } from "@grassroot/charts-vue";
</script>
 
<template>
  <WordCloudChart :words='[{ text: "gpu", value: 14 }, { text: "fallback", value: 8 }, { text: "svg", value: 6 }]' />
</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 [words]='[{ text: "gpu", value: 14 }, { text: "fallback", value: 8 }, { text: "svg", value: 6 }]' />`,
})
export class WordCloudChartDemoComponent {
 
}
 
export default WordCloudChartDemoComponent;

<script lang="ts">
  import { WordCloudChart } from "@grassroot/charts-svelte";
</script>
 
<WordCloudChart words={[{ text: "gpu", value: 14 }, { text: "fallback", value: 8 }, { text: "svg", value: 6 }]} />

/** @jsxImportSource solid-js */
import { WordCloudChart } from "@grassroot/charts-solid";
 
export default function WordCloudChartDemo() {
  return <WordCloudChart words={[{ text: "gpu", value: 14 }, { text: "fallback", value: 8 }, { text: "svg", value: 6 }]} />;
}