Text overlaps on setting angles = [0]

[Rohit0301]

I want all the text in horizontal form, so for that i have set angles = [0], but due to this my text is overlapping. so how can we resolve this problem.

var series = root.container.children.push(
        am5wc.WordCloud.new(root, {
            categoryField: 'tag',
            valueField: 'weight',
            calculateAggregates: true, 
            maxFontSize: am5.percent(24),
            minFontSize: am5.percent(12),
            angles: [0],
            maxCount: 100
            minValue: 2,
            minWordLength: 2
        })
    );

 series.labels.template.setAll({
        paddingTop: 5,
        paddingBottom: 5,
        paddingLeft: 5,
        paddingRight: 5,
        fontFamily: 'ProximaNova',
        cursorOverStyle: 'pointer',
    });

[zeroin]

Could you create a codepen with your exact config and data, as when I try this locally, I do not get overlapping.

[Rohit0301]

can you try with this data [{tag: 'pradhan', weight: 3}, {tag: 'brand', weight: 3}, {tag: 'size', weight: 3}, {tag: 'india', weight: 3}, {tag: 'apne', weight: 6}, {tag: 'offer', weight: 3}, {tag: 'requirement', weight: 3}, {tag: 'multi', weight: 3}, {tag: 'unit', weight: 5}, {tag: 'ram', weight: 5}, {tag: 'gurgaon', weight: 4}, {tag: 'matlab', weight: 3} ]

[Rohit0301]

import React from 'react'; import as am5 from '@amcharts/amcharts5'; import as am5wc from '@amcharts/amcharts5/wc'; import am5themes_Animated from '@amcharts/amcharts5/themes/Animated'; import { useEffect } from 'react'; import { Modal } from 'antd';

function WordCloud({ data = [], setWorldCloudVisible }) { console.log(data); useEffect(() => { var root = am5.Root.new('chartdiv');

    // Set themes
    // https://www.amcharts.com/docs/v5/concepts/themes/
    root.setThemes([am5themes_Animated.new(root)]);

    // Add series
    // https://www.amcharts.com/docs/v5/charts/word-cloud/
    var series = root.container.children.push(
        am5wc.WordCloud.new(root, {
            categoryField: 'tag',
            valueField: 'weight',
            calculateAggregates: true, // this is needed for heat rules to work
            maxFontSize: am5.percent(24),
            minFontSize: am5.percent(12),
            angles: [0],
            // excludeWords: ["the", "a", "an"], // words "the", "a", and "an" will not appear in cloud
            maxCount: 100, // the cloud will limited to 100 words
            minValue: 2, // only words that appear twice or more in sourceText will appear in the cloud
            minWordLength: 2, // words must be 2 characters in length or more
        })
    );
    // Configure labels
    series.labels.template.setAll({
        paddingTop: 20,
        paddingBottom: 20,
        paddingLeft: 20,
        paddingRight: 20,
        fontFamily: 'ProximaNova',
        cursorOverStyle: 'pointer',
    });

    series.set('heatRules', [
        {
            target: series.labels.template,
            dataField: 'value',
            min: am5.color(0x1a62f2),
            max: am5.color(0x6699ff),
            key: 'fill',
        },
    ]);

    // Add click event on words
    // https://www.amcharts.com/docs/v5/charts/word-cloud/#Events
    // series.labels.template.events.on("click", function (ev) {
    //     const category = ev.target.dataItem.get("category");
    //     window.open("https://convin.ai/");
    //     window.open("https://convin.ai/" + encodeURIComponent(category));
    // });

    // This is for the animation after each 5sec
    // setInterval(function () {
    //     am5.array.each(series.dataItems, function (dataItem) {
    //         var value = Math.random() * 65;
    //         value = value - Math.random() * value;
    //         dataItem.set("value", value);
    //         dataItem.set("valueWorking", value);
    //     })
    // }, 5000)

    // Data from:
    // https://insights.stackoverflow.com/survey/2021#section-most-popular-technologies-programming-scripting-and-markup-languages
    series.data.setAll(data);
}, []);
return (
    <Modal
        onCancel={() => setWorldCloudVisible(false)}
        visible={true}
        footer={null}
        wrapClassName="word_cloud"
    >
        <div id="chartdiv" style={{ width: '100%', height: '500px' }}></div>
    </Modal>
);

}

export default WordCloud;

[Rohit0301]

@zeroin can you tell me the problem in my code ?

[zeroin]

I don't see any problems, and on codepen it runs fine: https://codepen.io/team/amcharts/pen/OJwPvJP/a1ee12ed31bb3750ece4acf2588790e3?editors=1010

[Rohit0301]

okk

[github-actions[bot]]

This issue is stale because it has been open 30 days with no activity. It will be closed in 5 days unless a new comment is added.

[automubashir]

If words are overlapping, just remove the paddings from labels or change them to '0':

// Configure labels
  series.labels.template.setAll({
      paddingTop: 0,
      paddingBottom: 0,
      paddingLeft: 0,
      paddingRight: 0,
      fontFamily: 'ProximaNova',
      cursorOverStyle: 'pointer',
  });

[mfrasoulnejad]

Well, i had same issues with amchart5 tag cloud in reactjs. turns out it is related to animated theme for some reason. when you are using root.setThemes([am5themes_Animated.new(root)]); in your chart you typically use something like series.appear(1000, 100); at the end when you want to configure chart animation delay and duration. I've found that if I comment out this line its fixing the overlapping issue! weird but works for me!