Important words disappear when it's long

[fellipecechinel]

There's a example it's happening in my code. The word 'atendimento' disappear when the size of div is about 500px. I understand that it doesn't fit and it's not something easy, but to my end user it's something bad, because in this case for example it's the second most important word. Is there some workaround i can do?

$(document).ready(function() { $("#tagcloud-113033").jQWCloud({ words: [{ word: 'produtos', weight: 43 }, { word: 'atendimento', weight: 41 }, { word: 'loja', weight: 29 }, { word: 'qualidade', weight: 27 }, { word: 'sapatos', weight: 21 }, { word: 'cliente', weight: 20 }, { word: 'variedade', weight: 17 }, { word: 'calçados', weight: 14 }, { word: 'numeração', weight: 12 }, { word: 'produto', weight: 10 }, { word: 'diferencial', weight: 8 }, { word: 'excelente', weight: 8 }, { word: 'organização', weight: 8 }, { word: 'closets', weight: 7 }, { word: 'atendente', weight: 7 }, { word: 'modelos', weight: 7 }, { word: 'preço', weight: 7 }, { word: 'ambiente', weight: 6 }, { word: 'lindos', weight: 6 }, { word: 'expostos', weight: 6 }, { word: 'organizada', weight: 5 }, { word: 'separados', weight: 5 }, { word: 'melhor', weight: 5 }, { word: 'atendentes', weight: 5 }, { word: 'justo', weight: 5 }, { word: 'atenção', weight: 4 }, { word: 'facilita', weight: 4 }, { word: 'número', weight: 4 }, { word: 'forma', weight: 4 }, { word: 'grande', weight: 4 }, { word: 'ótimo', weight: 4 }, { word: 'além', weight: 4 }, { word: 'vendedora', weight: 4 }, { word: 'venda', weight: 4 }, { word: 'sapato', weight: 4 }, { word: 'disposição', weight: 4 }, { word: 'bolsas', weight: 4 }, { word: 'sendo', weight: 4 }, { word: 'variados', weight: 4 }, { word: 'confortáveis', weight: 4 }, { word: 'clientes', weight: 4 }, { word: 'confortável', weight: 3 }, { word: 'legal', weight: 3 }, { word: 'sempre', weight: 3 }, { word: 'geral', weight: 3 }, { word: 'lojas', weight: 3 }, { word: 'pela', weight: 3 }, { word: 'isso', weight: 3 }, { word: 'opções', weight: 3 }, { word: 'ótima', weight: 3 }, { word: 'oferecem', weight: 3 }, { word: 'constance', weight: 3 }, { word: 'atendida', weight: 3 }, { word: 'gostei', weight: 3 }, { word: 'agradável', weight: 3 }, { word: 'diversos', weight: 3 }, { word: 'deixar', weight: 3 }, { word: 'vontade', weight: 3 }, { word: 'certeza', weight: 3 }, { word: 'vitrine', weight: 3 }, { word: 'educadas', weight: 3 }, { word: 'comprar', weight: 3 }, { word: 'prestativa', weight: 2 }, { word: 'divididos', weight: 2 }, { word: 'todas', weight: 2 }, { word: 'atendem', weight: 2 }, { word: 'realmente', weight: 2 }, { word: 'forte', weight: 2 }, { word: 'simpáticas', weight: 2 }, { word: 'precisar', weight: 2 }, ], minFont: 12, maxFont: 60, fontOffset: 0, verticalEnabled: true, padding_left: 1, }); });

[prashant1rana]

Can you please share working example on https://jsfiddle.net/. I will try to provide alternate.

[fellipecechinel]

Of course. Here we go. It's the example where it shows the work 'Atendimento' -> https://jsfiddle.net/pw1j20Lz/2/ And here it doens't -> https://jsfiddle.net/pw1j20Lz/1/

I changed the width of the div like a responsive page

[prashant1rana]

You can play with max font or width or height . Meanwhile I will try to put a check, if text is not getting fit using given font, I will try to use smaller font for that. https://jsfiddle.net/54howc91/

[fellipecechinel]

Thanks for the support :) This check will be a incredable change. It's a very nice component. Congrats for the project.

[Offbeatmammal]

I'm still seeing this issue, example with this sample dataset: {word: '90s music',weight: 350}, {word: '80s music',weight: 350}, {word: 'Rock',weight: 321}, {word: 'Pop/Top40',weight: 270}, {word: '00s music',weight: 254}, {word: 'Hip-Hop / Rap',weight: 245}, {word: 'R&B/Soul',weight: 253}, {word: 'Indie / Alternative',weight: 58}, {word: '50s & 60s & 70s music',weight: 222}, {word: 'Singer-songwriter',weight: 202}, {word: 'Jazz',weight: 177}, {word: 'Classical & Opera',weight: 174}, {word: 'EDM/Dance',weight: 160}, {word: 'American Country',weight: 155}, {word: 'Latin Music',weight: 142}, {word: 'Afrobeats',weight: 40}, {word: 'Reggae/Ska',weight: 153}, {word: 'Metal',weight: 143}, {word: 'Regional music',weight: 141}, {word: 'American Folk',weight: 119}, {word: 'K-pop',weight: 91}, {word: 'None of these',weight: 9}

using the example jsFiddle above, 50s & 60s & 70s music consistently gets dropped (I am running it with verticalEnabled:false as well as that's my preferred layout, but setting to true still leaves it out)

it does look like a lot of empty space is being left above/below the main cluster of words, and the div structure/slicing is blocking off where words could fit:

would love to get this working (ideally better use of the available space, or automatic rescaling to ensure all words fit, or even a pointer how to find the words that are getting clipped to maybe truncate them so they fit) as despite the age it's one of the best js Wordcloud solutions I've found!