CODEWITHSUNDEEP
javascriptreactjsword-cloudanycharttag-cloud
Nothingbetter
Nothingbetter

Reputation: 128

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

Upvotes: 2

Views: 274

Answers (1)

AnyChart Support
AnyChart Support

Reputation: 3905

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.

Upvotes: 3

Related Questions