RetroSearch Browse

Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://github.com/sgratzl/chartjs-chart-wordcloud below:

GitHub - sgratzl/chartjs-chart-wordcloud: Chart.js Word Clouds

Chart.js module for charting word or tag clouds. Adding new chart type: wordCloud.

Check out also my other chart.js plugins:

chartjs-chart-boxplot for rendering boxplots and violin plots
chartjs-chart-error-bars for rendering errors bars to bars and line charts
chartjs-chart-geo for rendering map, bubble maps, and choropleth charts
chartjs-chart-graph for rendering graphs, trees, and networks
chartjs-chart-pcp for rendering parallel coordinate plots
chartjs-chart-venn for rendering venn and euler diagrams
chartjs-plugin-hierarchical for rendering hierarchical categorical axes which can be expanded and collapsed

npm install --save chart.js chartjs-chart-wordcloud

see Examples

or at this

const config = {
  type: 'wordCloud',
  data: {
    // text
    labels: ['Hello', 'world', 'normally', 'you', 'want', 'more', 'words', 'than', 'this'],
    datasets: [
      {
        label: 'DS',
        // size in pixel
        data: [90, 80, 70, 60, 50, 40, 30, 20, 10],
      },
    ],
  },
  options: {},
};

A word has the basic FontSpec styling options (family, color, ...). In addition it has several options regarding rotating the text.

Controller options:

export interface IWordCloudControllerDatasetOptions extends IControllerDatasetOptions, ScriptableAndArrayOptions<IWordElementOptions>, ScriptableAndArrayOptions<ICommonHoverOptions> { /** * whether to fit the word cloud to the map, by scaling to the actual bounds * @default true */ fit: boolean; }

Word element options:

export interface IWordElementOptions extends IFontSpec { /** * rotation of the word * @default undefined then it will be randomly derived given the other constraints */ rotate: number; /** * number of rotation steps between min and max rotation * @default 2 */ rotationSteps: number; /** * angle in degree for the min rotation * @default -90 */ minRotation: number; /** * angle in degree for the max rotation * @default 0 */ maxRotation: number; /** * padding around each word while doing the layout * @default 1 */ padding: number; }

The ESM build of the library supports tree shaking thus having no side effects. As a consequence the chart.js library won't be automatically manipulated nor new controllers automatically registered. One has to manually import and register them.

Variant A:

import { Chart } from 'chart.js';
import { WordCloudController, WordElement } from 'chartjs-chart-wordcloud';

Chart.register(WordCloudController, WordElement);
...

new Chart(ctx, {
  type: WordCloudController.id,
  data: [...],
});

Variant B:

import { WordCloudChart } from 'chartjs-chart-wordcloud';

new WordCloudChart(ctx, {
  data: [...],
});

npm i -g yarn
yarn install
yarn sdks vscode

yarn compile
yarn test
yarn lint
yarn fix
yarn build
yarn docs

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4