Available in the Full Version

Category Chart - Axis Labels

This sample demonstrates how to change the margin and the font color of axis labels in the category chart control.
X-Axis Options
Y-Axis Options

This sample is designed for a larger screen size.

On mobile, try rotating your screen, view full size, or email to another device.

Code View

Copy to Clipboard 
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Category Chart Axis Labels</title>


    <script src="http://ajax.aspnetcdn.com/ajax/modernizr/modernizr-2.8.3.js"></script>
    <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
    <script src="http://code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script>

    <!-- Ignite UI for jQuery Required Combined CSS Files -->
    <link href="http://cdn-na.infragistics.com/igniteui/2024.2/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet" />
    <link href="http://cdn-na.infragistics.com/igniteui/2024.2/latest/css/structure/infragistics.css" rel="stylesheet" />

    <!-- Ignite UI for jQuery Required Combined JavaScript Files -->
    <script src="http://cdn-na.infragistics.com/igniteui/2024.2/latest/js/infragistics.core.js"></script>
    <script src="http://cdn-na.infragistics.com/igniteui/2024.2/latest/js/infragistics.dv.js"></script>

    <style type="text/css">
        .chart {
            position: relative;
            float: left;
            margin-right: 10px;
        }

        .optionsPane {
            position: relative;
            float: initial;
            width: 270px;
            margin: 6px 3px 6px 6px;
            display: inline-block;
            padding-top: 18px;
        }

        .optionsColumn {
            float: left;
            position: relative; 
            margin: 2px;
            padding: 2px;
            display: inline-block;
            -moz-border-radius: 4px;
            -webkit-border-radius: 4px;
            border-radius: 4px;
            border: 1px solid #e0e0e0;
        }

        .slider {
            width: 250px;
            margin: 10px 10px 4px 6px;
            padding-right: 3px;
            padding-left: 3px;
            display: inline-block;
            float: left;
        }

        .selector {
            width: 250px;
            margin: 10px 10px 4px 6px;
            padding-right: 3px;
            padding-left: 3px;
            display: inline-block;
            float: left;
        }

        .values {
            padding-left: 7px;
            padding-right: 0px;
            width: 30px;
        }
    </style>

</head>
<body>
    <div id="chart" class="chart" style="width:600px;height:400px"></div>

    <div>
        <div class="optionsPane">
            <div><b>X-Axis Options</b></div>
            <div class="optionsColumn">
                
                <div>
                    <label>Labels Margin:</label>
                    <label id="xAxisLabelMargin" class="values">5</label>
                    <div id="xAxisLabelMarginSlider" class="slider"></div>
                </div>

                <div>
                    <label>Labels Font:</label>
                    <label id="xAxisLabelFontSize" class="values">10</label>
                    <div id="xAxisLabelFontSizeSlider" class="slider"></div>
                </div>

                <div>
                    <label>Labels Angle:</label>
                    <label id="xAxisLabelAngle" class="values">0</label>
                    <div id="xAxisLabelAngleSlider" class="slider"></div>
                </div>

                <label>Labels Color:</label>
                <div>
                    <select class="selector" id="xAxisLabelColorPicker">
                        <option value="gray">gray</option>
                        <option value="blue">blue</option>
                        <option value="red">red</option>
                        <option value="green">green</option>
                        <option value="orange">orange</option>
                        <option value="violet">violet</option>
                        <option value="indigo">indigo</option>
                        <option value="black">black</option>
                        <option value="white">white</option>
                    </select>
                </div>
            </div>
        </div>
        <div class="optionsPane">
            <div><b>Y-Axis Options</b></div>
            <div class="optionsColumn">
                <div>
                    <label>Labels Margin:</label>
                    <label id="yAxisLabelMargin" class="values">5</label>
                    <div id="yAxisLabelMarginSlider" class="slider"></div>
                </div>

                <div>
                    <label>Labels Font:</label>
                    <label id="yAxisLabelFontSize" class="values">10</label>
                    <div id="yAxisLabelFontSizeSlider" class="slider"></div>
                </div>

                <div>
                    <label>Labels Angle:</label>
                    <label id="yAxisLabelAngle" class="values">0</label>
                    <div id="yAxisLabelAngleSlider" class="slider"></div>
                </div>

                <div>
                    <label>Labels Color:</label>
                    <div>
                        <select class="selector" id="yAxisLabelColorPicker">
                            <option value="gray">gray</option>
                            <option value="blue">blue</option>
                            <option value="red">red</option>
                            <option value="green">green</option>
                            <option value="orange">orange</option>
                            <option value="violet">violet</option>
                            <option value="indigo">indigo</option>
                            <option value="black">black</option>
                            <option value="white">white</option>
                        </select>
                    </div>
                </div>
            </div>
        </div>

    </div>
   
    <script type="text/javascript">
        var data = [
            { "Country": "CHN", "Population 1995": 1216, "Population 2005": 1297, "Population 2015": 1361, "Population 2025": 1394 },
            { "Country": "IND", "Population 1995": 920,  "Population 2005": 1090, "Population 2015": 1251, "Population 2025": 1396 },
            { "Country": "USA", "Population 1995": 266,  "Population 2005": 295,  "Population 2015": 322,  "Population 2025": 351 },
            { "Country": "BRA", "Population 1995": 161,  "Population 2005": 186,  "Population 2015": 204,  "Population 2025": 218 }
        ]; 

        // CODE SNIPPET
        $(function () {
            $("#chart").igCategoryChart({ 
                xAxisLabelTopMargin: 5,
                xAxisLabelBottomMargin: 5,
                yAxisLabelRightMargin: 5,
                yAxisLabelLeftMargin: 5,
                xAxisLabelAngle: 0,
                yAxisLabelAngle: 0,
                xAxisLabelTextColor: "gray",
                yAxisLabelTextColor: "gray",
                xAxisLabelTextStyle: "10pt Verdana",
                yAxisLabelTextStyle: "10pt Verdana",
                yAxisLabelLocation: "outsideRight",
                yAxisLabelHorizontalAlignment: "left",
                dataSource: data,
                chartType: "column",
                yAxisInterval: 500,
                yAxisMinimumValue: 0,
                yAxisMaximumValue: 1500,
            });
        });
        $("#chart").igCategoryChart({
            yAxisFormatLabel: function (value) {
                return value + " M";
            }
        });
        $("#chart").igCategoryChart({
            xAxisFormatLabel: function (item) {
                var code = item["Country"];
                if (code == "CHN") return "CHINA";
                if (code == "IND") return "INDIA"; 
                if (code == "BRA") return "BRAZIL"; 
                return code;
            }
        });
        // CODE SNIPPET

        $("#chart").igCategoryChart({ title: "Population per Country" });

        // event handlers
        $("#xAxisLabelColorPicker").change(function (e) {
            var xbrush = $(this).val();
            $("#chart").igCategoryChart("option", "xAxisLabelTextColor", xbrush);
        });

        $("#xAxisLabelMarginSlider").slider({
            min: 0, max: 25, value: 5,
            slide: function (e, ui) {
                $("#chart").igCategoryChart("option", "xAxisLabelTopMargin", ui.value);
                $("#chart").igCategoryChart("option", "xAxisLabelBottomMargin", ui.value);
                $("#xAxisLabelMargin").text(ui.value);
            }
        });

        $("#xAxisLabelFontSizeSlider").slider({
            min: 5, max: 15, value: 10,
            slide: function (e, ui) {
                var size = ui.value + "pt";
                var style = size + " " + "Verdona";
                $("#chart").igCategoryChart("option", "xAxisLabelTextStyle", style);
                $("#xAxisLabelFontSize").text(ui.value);
            }
        });

        $("#xAxisLabelAngleSlider").slider({
            min: -180, max: 180, value: 0,
            slide: function (e, ui) {
                $("#chart").igCategoryChart("option", "xAxisLabelAngle", ui.value);
                $("#xAxisLabelAngle").text(ui.value);
            }
        });

        $("#yAxisLabelColorPicker").change(function (e) {
            var xbrush = $(this).val();
            $("#chart").igCategoryChart("option", "yAxisLabelTextColor", xbrush);
        });

        $("#yAxisLabelMarginSlider").slider({
            min: 0, max: 25,  value: 5,
            slide: function (e, ui) {
                $("#chart").igCategoryChart("option", "yAxisLabelLeftMargin", ui.value);
                $("#chart").igCategoryChart("option", "yAxisLabelRightMargin", ui.value);
                $("#yAxisLabelMargin").text(ui.value);
            }
        });
        
        $("#yAxisLabelFontSizeSlider").slider({
            min: 5, max: 15, value: 10,
            slide: function (e, ui) {
                var size = ui.value + "pt";
                var style = size + " " + "Verdona";
                $("#chart").igCategoryChart("option", "yAxisLabelTextStyle", style);
                $("#yAxisLabelFontSize").text(ui.value);
            }
        });

        $("#yAxisLabelAngleSlider").slider({
            min: -90, max: 90, value: 0,
            slide: function (e, ui) {
                $("#chart").igCategoryChart("option", "yAxisLabelAngle", ui.value);
                $("#yAxisLabelAngle").text(ui.value);
            }
        });
    </script>
</body>
</html>