Skip to content
Related Articles
Get the best out of our app
GeeksforGeeks App
Open App

Related Articles

jQWidgets jqxHeatMap xAxis Property

Improve Article
Save Article
Like Article
Improve Article
Save Article
Like Article

jQWidgets is a JavaScript framework for making web-based applications for PC and mobile devices. It is a very powerful and optimized framework, platform-independent, and widely supported. The jqxHeatMap represents a jQuery widget that shows a graphical representation of data that uses color-coding to represent different values.

The xAxis property is used to set or return the xAxis property. i.e. this property is used to set or return the HeatMap x-axis settings. It accepts object type values and the default value is null.


  • It is used to set the xAxis property.
    $('Selector').jqxHeatMap({ xAxis : array});
  • It is used to return the xAxis property.
    var xAxis = $('Selector').jqxHeatMap('xAxis');


  • labels: It is used to sets the x-axis labels when not using minimum and maximum properties.
  • opposedPosition: It is used to sets whether the axis is to be displayed at the opposite side with respect to the default position. The default value is false.
  • isInversed: It is used to sets whether the axis is to be displayed in inversed position or not. The default value is false.
  • minimum: It is used to sets the minimum range of the x-axis.
  • maximum: It is used to sets the maximum range of the x-axis.
  • labelFormat: It is used to format the label for the axis when setting the properties for minimum and maximum. The possible labelFormat options are short, numeric, 2-digit, narrow, short or long, among which short is the default value.


Linked Files: Download jQWidgets from the 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-1.11.1.min.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxcore.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxheatmap.js”></script>

Example: The below example illustrates the jqxHeatMap xAxis property in jQWidgets.


<!DOCTYPE html>
<html lang="en">
    <link rel="stylesheet" 
          type="text/css" />
    <script type="text/javascript" 
    <script type="text/javascript" 
    <script type="text/javascript" 
        <h1 style="color: green">
        <h3>jQWidgets jqxHeatMap xAxis property</h3>
        <body class='default'>
            <div id="heatmap"></div>
    <script type="text/javascript">
        $(document).ready(function () {
            var x = {
                labels: ['Ram', 'Rahul', 'Krishna']
            var y = {
                labels: ['1st oct', '2nd oct', 
                '3rd oct', '4th oct']
            var arr = [
                [1, 3, 9, 5],
                [5, 3, 2, 3],
                [2, 0, 6, 8]
                xAxis: x,
                yAxis: y,
                source: arr,
                title: 'Coding Questions Solved:',



My Personal Notes arrow_drop_up
Last Updated : 29 Oct, 2021
Like Article
Save Article
Similar Reads
Related Tutorials