jQWidgets jqxTagCloud minColor Property

Last Updated : 14 Nov, 2021

jQWidgets is a JavaScript framework for making web-based applications for PC and mobile devices. It is a very powerful, optimized, platform-independent, and widely supported framework. The jqxTagCloud is used for displaying a set of user-generated tags that go with the articles, posts, or videos on a website.

The minColor property is used for setting or getting the minColor property for specifying the color of the tags for the elements with the lowest value attribute. This property together with the maxColor property will set the color of tags in a gradient fashion depending on their value attribute towards the highest value. Its possible values are all browser-supported colors including the rgba.

Syntax:

For setting the minColor property.

$('#jqxTagCloud').jqxTagCloud({ minColor: 'black' });

For getting the minColor property.

var value = $('#jqxTagCloud').jqxTagCloud({ 'minColor' });

Linked Files: Download jQWidgets from the given link. In the HTML file, locate the script files in the downloaded folder.

<link rel=”stylesheet” href=”jqwidgets/styles/jqx.base.css” type=”text/css” />
<script type=”text/javascript” src=”scripts/jquery.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 type=”text/javascript” src=”jqwidgets/jqx-all.js”></script>

Example: The below example illustrates the jQWidgets jqxTagCloud minColor property. In the below example, the value of the minColor property has been set to ‘black’.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <link rel="stylesheet"
          href="jqwidgets/styles/jqx.base.css" 
          type="text/css"/> 
    <script type="text/javascript" 
            src="scripts/jquery.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 type="text/javascript" 
            src="jqwidgets/jqx-all.js"> 
    </script> 
</head> 
  
<body> 
    <center> 
        <h1 style="color:green;"> 
            GeeksforGeeks 
        </h1> 
        <h3> 
            jQWidgets jqxTagCloud minColor Property 
        </h3> 
        <div id="Tag_Cloud"></div> 
        <input type="button" style="margin:28px;" 
               id="button_for_minColor"
               value="Value of the minColor property"/> 
        <div id="log"></div> 
        
        <script type="text/javascript"> 
            
            $(document).ready(function () { 
                var Data_for_TagCloud = [ 
                    { Name: "GFG", Rating: 4 }, 
                    { Name: "is a", Rating: 3 }, 
                    { Name: "CS", Rating: 2 }, 
                    { Name: "Portal.", Rating: 5 }, 
                ]; 
                var dataAdapter = new 
                    $.jqx.dataAdapter({ 
                        localData: Data_for_TagCloud 
                    }); 
                $('#Tag_Cloud').jqxTagCloud({ 
                    width: 450, 
                    source: dataAdapter, 
                    displayMember: 'Name', 
                    valueMember: 'Rating', 
                    maxColor: 'red', 
                    minColor: 'black' 
                }); 
                $("#button_for_minColor"). 
                    jqxButton({ 
                        width: 300 
                    }); 
                $("#button_for_minColor").jqxButton(). 
                    click(function () { 
                        var Value_of_minColor = 
                            $('#Tag_Cloud').jqxTagCloud('minColor'); 
                        $("#log").html((Value_of_minColor)); 
                    }); 
            }); 
        </script> 
    </center> 
</body> 
  
</html>