2

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

Nothingbetter
  • 48
  • 2
  • 14

1 Answers1

3

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.

AnyChart Support
  • 3,770
  • 1
  • 10
  • 16
  • That doesn't seem to work. I have that commented out in my question also because it didn't work. It works in the plain Javascript library but not the React library – Nothingbetter Nov 22 '21 at 06:13
  • Make sure that you included the JS of the coffee theme. – AnyChart Support Nov 22 '21 at 06:27
  • I thought I did in my demo I posted but maybe I did it wrong. Here is a modified version of your sample but it doesn't seem to work either: https://codesandbox.io/s/react-example-forked-4vl50?file=/index.html – Nothingbetter Nov 22 '21 at 22:40
  • 1
    Theme JS files are simple self-invoked functions. They are not available as modules via NPM. Importing them as JS side-effect JS scripts will not work in React. So, you need to convert the desired theme to a module. For details, check the modified sample - https://codesandbox.io/s/react-example-forked-dd9d3?file=/coffee.js – AnyChart Support Dec 01 '21 at 05:13