jQuery TagCloud CSS Styling and Appearance

Styling and Appearance

The jqxTagCloud allows for a number of different options to style the elements of the cloud. In order to fit various needs we have provided options to:

Set the min and max fontSize depending on the value(weight) of the element.
Set the tag text color for all elements using textColor.

Here is an example of tags with mountain Peaks with their fontsize scaled by their height and text color set to brown.

<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>Mountain peak fontSize example</title>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css"/>
    <script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxtagcloud.js"></script>
    
    <script>
        $(document).ready(function () {
            var data = [
                { label: "Mount Everest", value: 8848 },
                { label: "K2", value: 8611 },
                { label: "Lhotse", value: 8516 },
                { label: "Mana Peak", value: 7272 },
                { label: "Musala", value: 2925 },
                { label: "Mount Elbrus", value: 5642 },
                { label: "Sea", value: 0 }
            ];
 
            $('#jqxTagCloud').jqxTagCloud({
                source: data,
                textColor: 'brown',
                minFontSize: 12,
                maxFontSize: 30
            });
        });
    </script>
<script async src="https://www.googletagmanager.com/gtag/js?id=G-2FX5PV9DNT"></script><script>window.dataLayer = window.dataLayer || [];function gtag(){dataLayer.push(arguments);}gtag('js', new Date());gtag('config', 'G-2FX5PV9DNT');</script></head>
<body>
<div id="jqxTagCloud"></div>
</body>
</html>

Set colors for the elements with min and max value(weight) and transitioning colors according to their value between min and max colors for the others.
Here is an example of tags with mountain Peaks with their fontsize scaled by their height.
Alter the text case of the labels in your elements. Possible values: 'none', 'allLower', 'allUpper', 'firstUpper', 'titleCase'

jqxTagCloud CSS class styles

jQWidgets uses a pair of css files - jqx.base.css and jqx.[theme name].css. The base stylesheet creates the styles related to the widget's layout like margin, padding, border-width, position. The second css file applies the widget's colors and backgrounds. The jqx.base.css should be included before the second CSS file.

Below is the list of CSS classes used by jqxTagCloud.

jqx-widget - applied to jqxTagCloud widget.
jqx-tag-cloud - applied to jqxTagCloud's ul element.
jqx-tag-cloud-item - applied to the jqxTagCloud li element.

You can use these classes to style your own widget.

The sample below demostrates how you can use the above mentioned classes to style it as a list of tags.

<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>jqxTagCloud custom styling example</title>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css"/>
    <script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxtagcloud.js"></script>
    <style type="text/css">
        .jqx-tag-cloud {
            padding-left: 5px;
        }
        .jqx-tag-cloud-item{
            border: 1px solid black;
            margin: 3px;
            border-radius: 5px;
            padding: 3px;
            background: #C3C3C3;
        }
       
        .jqx-tag-cloud-item img {
            padding-left: 4px;
        }
    </style>
    <script>
        $(document).ready(function () {
            var data = [
                { countryName: "Australia", technologyRating: 35 },
                { countryName: "United States", technologyRating: 60 },
                { countryName: "Germany", technologyRating: 55 },
                { countryName: "Brasil", technologyRating: 20 },
                { countryName: "United Kingdom", technologyRating: 50 },
                { countryName: "Japan", technologyRating: 80 }
            ];
            var source =
            {
                localdata: data,
                datatype: "array",
                datafields: [
                    { name: 'countryName' },
                    { name: 'technologyRating' },
                    { name: 'url' }
                ]
            };
            var dataAdapter = new $.jqx.dataAdapter(source, {});
            $('#jqxTagCloud').jqxTagCloud({
                width: 650,
                source: dataAdapter,
                minFontSize: 16,
                maxFontSize: 16,
                textColor: 'lightyellow',
                tagRenderer: function (record, minValue, range) {
                    var el = $('<span><span>' + record.countryName + '</span></span>');
                    var img = $('<img src="../../jqwidgets/styles/images/close.png" ' +
                        'style="width:auto; height:auto; vertical-align: middle;">');
                    el.append(img);
                    return el;
                },
                displayMember: 'countryName',
                valueMember: 'technologyRating'
            });
            // bind to itemClicked event.
            $('#jqxTagCloud').on('itemClicked', function (event) {
                var originalEvent = event.args.originalEvent;
                if (originalEvent.target.tagName.toLowerCase() == 'img') {
                    $('#jqxTagCloud').jqxTagCloud('removeAt', event.args.recordIndex);
                }
            });
        });
    </script>
<script async src="https://www.googletagmanager.com/gtag/js?id=G-2FX5PV9DNT"></script><script>window.dataLayer = window.dataLayer || [];function gtag(){dataLayer.push(arguments);}gtag('js', new Date());gtag('config', 'G-2FX5PV9DNT');</script></head>
<body>
<div id="jqxTagCloud"></div>
</body>
</html>

jqxTagCloud Theme support

Should you need to have seperate themes for the jqxTagCloud, you can use the following method:

Add the above CSS classes related to jqxTagCloud
After each CSS class, add your theme name.
For example:
jqx-jqxTagCloud-shinyblack
To apply your custom style to jqxTagCloud, you need to set its theme property(option) to point to your theme name string.
```
$("#jqxTagCloud").jqxTagCloud({ theme: 'shinyblack'});
```

The sample below demonstrates how to set the 'Shiny Black' theme to jqxTagCloud.

<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>Add theme example</title>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css"/>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.shinyblack.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxtagcloud.js"></script>
    
    <script>
        $(document).ready(function () {
            var data = [
                { countryName: "Australia", technologyRating: 35 },
                { countryName: "United States", technologyRating: 60 },
                { countryName: "Germany", technologyRating: 55 },
                { countryName: "Brasil", technologyRating: 20 },
                { countryName: "United Kingdom", technologyRating: 50 },
                { countryName: "Japan", technologyRating: 80 }
            ];
 
            $('#jqxTagCloud').jqxTagCloud({
                source: data,
                textColor: 'brown',
                theme: 'shinyblack',
                displayMember: 'countryName',
                valueMember: 'technologyRating'
            });
        });
    </script>
<script async src="https://www.googletagmanager.com/gtag/js?id=G-2FX5PV9DNT"></script><script>window.dataLayer = window.dataLayer || [];function gtag(){dataLayer.push(arguments);}gtag('js', new Date());gtag('config', 'G-2FX5PV9DNT');</script></head>
<body>
<div id="jqxTagCloud"></div>
</body>
</html>