Words overlap

[BlueMonkey]

Hi guys,

I am facing an issue with the wordCloud where words are overlapping.
I am using webpack 4.46.0 and wordcloud version ^1.2.7

Your advice would be much appreciate it.

My file is:

const options: Options = {
  colors: colorSchemes.category10.map((s) => `${s}`),
  enableTooltip: false,
  deterministic: true,
  fontSizes: [20, 60],
  fontStyle: 'normal',
  fontWeight: 'normal',
  padding: 3,
  rotations: 0,
  rotationAngles: [-60, 60],
  scale: 'sqrt',
  spiral: 'archimedean',
  transitionDuration: 1000,
  enableOptimizations: false,
  fontFamily: '',
  svgAttributes: {},
  textAttributes: {},
  tooltipOptions: {},
};

function WordCloud({ words, id, size, ...props }: Props) {
  return (
    <Pane width="100%" id={id}>
      {size ? (
        <ReactWordcloud
          words={words}
          options={options}
          maxWords={100}
          size={size}
          minSize={size}
          {...props}
        />
      ) : (
        <ReactWordcloud
          words={words}
          options={options}
          maxWords={100}
          {...props}
        />
      )}
    </Pane>
  );
}

and the result is the picture below

[Nigel Manson]

Also having the same issue and going to look at why this is. When you refresh for a new layout, it sometimes works. Wondering if its a race condition.

[BlueMonkey]

solved @nigel-loops I had to specify the default of a fontFamily and not leave it as an empty string: for instance I put 'times new roman'

[Nigel Manson]

Appreciate the reply, @Viki-Robles. I have that set already and still have overlaps.

[BlueMonkey]

mm I don't know @nigel-loops .. what I did was to try out one by one the variables and comment out or change them. sorry that I can't be more of a help..