javascriptreactjsword-cloudanycharttag-cloud

How do I change the theme in an AnyChart React tag cloud?

I am creating a tag cloud word cloud using the React library from AnyChart. How do I change the color theme of it? The answer found here doesn't seem to work:

import React from "react";
import ReactDOM from "react-dom";
import AnyChart from "anychart-react";
import anychart from "anychart";
anychart.theme("coffee");

var data = [
  { x: "learning", value: 80 },
  { x: "includes", value: 56 },
  { x: "lists", value: 44 },
  { x: "meaning", value: 40 },
  { x: "useful", value: 36 },
  { x: "different", value: 32 },
  { x: "grammar", value: 28 },
  { x: "teaching", value: 24 },
  { x: "example", value: 20 },
  { x: "thing", value: 12 }
];

// create a chart and set the data
var chart = anychart.tagCloud(data);
//chart.theme = anychart.palettes.coffee;

ReactDOM.render(
  <AnyChart width={800} height={600} instance={chart} title="Column chart" />,
  document.getElementById("root")
);

Full demo is here

Solution

  • It is available if you are using the instance attribute. THe idea is to create the chart with the usual library API, and then apply this instance to the component. In this case, all library features are available via API. So, you can use this call

    chart.theme = anychart.palettes.coffee;

    in the instance. For details, check the live sample.