Available in the Full Version
Category Chart - Axis Lines

This sample demonstrates how to add and modify the appearance for major and minor grid lines of the category chart.
X-Axis Options
Major Grid Lines Visible:
Major Grid Lines Interval: 1
Major Grid Lines Thickness: 1
Minor Grid Lines Visible:
Minor Grid Lines Interval: 0.5
Minor Grid Lines Thickness: 0.5
Y-Axis Options
Major Grid Lines Visible:
Major Grid Lines Interval: 500
Major Grid Lines Thickness: 1
Minor Grid Lines Visible:
Minor Grid Lines Interval: 250
Minor Grid Lines Thickness: 0.5
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

Show In JsFiddle
Copy to Clipboard
HTML
                    <!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Axis Intervals</title>

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

    <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;
            /*width: 280px;*/
            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;
        }

        .labels {
            padding-right: 7px;
        }

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

    <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 JavaScript Files -->
    <script src="http://cdn-na.infragistics.com/igniteui/2023.2/latest/js/infragistics.core.js"></script>
    <script src="http://cdn-na.infragistics.com/igniteui/2023.2/latest/js/infragistics.dv.js"></script>
</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">
                <label class="labels">Major Grid Lines Visible:</label>
                <input class="checkbox" id="xAxisMajorCheckbox" type="checkbox" checked />
                <div>
                    <label class="labels">Major Grid Lines Interval:</label>
                    <label class="values" id="xAxisMajorIntervalLabel">1</label>
                    <div class="slider" id="xAxisMajorIntervalSlider"></div>
                </div>
                <div>
                    <label class="labels">Major Grid Lines Thickness:</label>
                    <label class="values" id="xAxisMajorStrokeThicknessLabel" >1</label>
                    <div   class="slider" id="xAxisMajorStrokeThicknessSlider" ></div>
                </div>

                <label class="labels">Minor Grid Lines Visible:</label>
                <input class="checkbox" id="xAxisMinorCheckbox" type="checkbox" checked />
                <div>
                    <label class="labels">Minor Grid Lines Interval:</label>
                    <label class="values" id="xAxisMinorIntervalLabel">0.5</label>
                    <div class="slider" id="xAxisMinorIntervalSlider"></div>
                </div>
                <div>
                    <label class="labels">Minor Grid Lines Thickness:</label>
                    <label class="values" id="xAxisMinorStrokeThicknessLabel" >0.5</label>
                    <div   class="slider" id="xAxisMinorStrokeThicknessSlider" ></div>
                </div>
            </div>
            
        </div>
        
        <div class="optionsPane">
            <div><b>Y-Axis Options</b></div>
            <div class="optionsColumn">
                <label class="labels">Major Grid Lines Visible:</label>
                <input class="checkbox" id="yAxisMajorCheckbox" type="checkbox" checked/>
                <div>
                    <label class="labels">Major Grid Lines Interval:</label>
                    <label class="values" id="yAxisMajorIntervalLabel">500</label>
                    <div class="slider" id="yAxisMajorIntervalSlider"></div>
                </div>
                <div>
                    <label class="labels">Major Grid Lines Thickness:</label>
                    <label class="values" id="yAxisMajorStrokeThicknessLabel" >1</label>
                    <div   class="slider" id="yAxisMajorStrokeThicknessSlider" ></div>
                </div> 

                <label class="labels">Minor Grid Lines Visible:</label>
                <input id="yAxisMinorCheckbox" type="checkbox" class="checkbox" checked/>
                <div>
                    <label class="labels">Minor Grid Lines Interval:</label>
                    <label class="values" id="yAxisMinorIntervalLabel">250</label>
                    <div class="slider" id="yAxisMinorIntervalSlider"></div>
                </div>
                <div>
                    <label class="labels" >Minor Grid Lines Thickness:</label>
                    <label class="values" id="yAxisMinorStrokeThicknessLabel">0.5</label>
                    <div   class="slider" id="yAxisMinorStrokeThicknessSlider"></div>
                </div>
            </div>
        </div>
    </div>

    <script type="text/javascript">
        var transparentBrush = "rgba(0,0,0,0)";

        var data = [
                 { "CountryName": "CHN", "Population 1995": 1216, "Population 2005": 1297, "Population 2015": 1361, "Population 2025": 1394 },
                 { "CountryName": "IND", "Population 1995": 920, "Population 2005": 1090, "Population 2015": 1251, "Population 2025": 1396 },
                 { "CountryName": "USA", "Population 1995": 266, "Population 2005": 295, "Population 2015": 322, "Population 2025": 351 },
                 { "CountryName": "BRA", "Population 1995": 161, "Population 2005": 186, "Population 2015": 204, "Population 2025": 218 }
        ];

        // CODE SNIPPET
        $(function () {
            $("#chart").igCategoryChart({ 
                xAxisMinorStroke: "Red",
                yAxisMinorStroke: "Red",
                yAxisMajorStroke: "Green",
                xAxisMajorStroke: "Green",
                xAxisMajorStrokeThickness: 1.0,
                yAxisMajorStrokeThickness: 1.0,
                xAxisMinorStrokeThickness: 0.5,
                yAxisMinorStrokeThickness: 0.5,
                xAxisMinorInterval: 0.5,
                yAxisMinorInterval: 250,
                xAxisInterval: 1,
                yAxisInterval: 500,
                yAxisMinimumValue: 0,
                yAxisMaximumValue: 1500,
                dataSource: data,
                chartType: "column",

            });
        });
        // CODE SNIPPET

        $("#chart").igCategoryChart({ title: "Population per Country" });
        $("#chart").igCategoryChart({
            yAxisFormatLabel: function (value) {
                return value + " M";
            }
        });

        // event handers
        $("#xAxisMajorCheckbox").click(function (e) {
            var brush = $("#xAxisMajorCheckbox").is(":checked") ? "Green" : transparentBrush;
            $("#chart").igCategoryChart("option", "xAxisMajorStroke", brush);
        });

        $("#xAxisMinorCheckbox").click("change", function () {
            var brush = ($(this).is(":checked")) ? "Red" : transparentBrush;
            $("#chart").igCategoryChart("option", "xAxisMinorStroke", brush);
        });

        $("#yAxisMajorCheckbox").click("change", function () {
            var brush = ($(this).is(":checked")) ? "Green" : transparentBrush;
            $("#chart").igCategoryChart("option", "yAxisMajorStroke", brush);
        });

        $("#yAxisMinorCheckbox").click("change", function () {
            var brush = ($(this).is(":checked")) ? "Red" : transparentBrush;
            $("#chart").igCategoryChart("option", "yAxisMinorStroke", brush);
        });

        $("#xAxisMajorStrokeThicknessSlider").slider({
            min: 5, max: 50, value: 10,
            slide: function (e, ui) {
                var thickness = ui.value * 0.1;
                $("#chart").igCategoryChart("option", "xAxisMajorStrokeThickness", thickness);
                $("#xAxisMajorStrokeThicknessLabel").text(thickness.toFixed(1));
            }
        });

        $("#xAxisMinorStrokeThicknessSlider").slider({
            min: 5, max: 50, value: 10,
            slide: function (e, ui) {
                var thickness = ui.value * 0.1;
                $("#chart").igCategoryChart("option", "xAxisMinorStrokeThickness", thickness);
                $("#xAxisMinorStrokeThicknessLabel").text(thickness.toFixed(1));
            }
        });

        $("#yAxisMajorStrokeThicknessSlider").slider({
            min: 5, max: 50, value: 10,
            slide: function (e, ui) {
                var thickness = ui.value * 0.1;
                $("#chart").igCategoryChart("option", "yAxisMajorStrokeThickness", thickness);
                $("#yAxisMajorStrokeThicknessLabel").text(thickness.toFixed(1));
            }
        });

        $("#yAxisMinorStrokeThicknessSlider").slider({
            min: 5, max: 50, value: 10,
            slide: function (e, ui) {
                var thickness = ui.value * 0.1;
                $("#chart").igCategoryChart("option", "yAxisMinorStrokeThickness", thickness);
                $("#yAxisMinorStrokeThicknessLabel").text(thickness.toFixed(1));
            }
        });

        $("#xAxisMajorIntervalSlider").slider({
            min: 1, max: 5, value: 1,
            slide: function (e, ui) {
                var interval = ui.value;
                $("#chart").igCategoryChart("option", "xAxisInterval", interval);
                $("#xAxisMajorIntervalLabel").text(interval.toFixed(1));
            }
        });

        $("#yAxisMajorIntervalSlider").slider({
            min: 200, max: 1500, value: 500,
            slide: function (e, ui) {
                var interval = ui.value;
                $("#chart").igCategoryChart("option", "yAxisInterval", interval);
                $("#yAxisMajorIntervalLabel").text(interval);
            }
        });

        $("#xAxisMinorIntervalSlider").slider({
            min: 1, max: 10, value: 5,
            slide: function (e, ui) {
                var interval = ui.value * 0.1;
                $("#chart").igCategoryChart("option", "xAxisMinorInterval", interval);
                $("#xAxisMinorIntervalLabel").text(interval.toFixed(1));
            }
        });

        $("#yAxisMinorIntervalSlider").slider({
            min: 100, max: 500, value: 250,
            slide: function (e, ui) {
                var interval = ui.value;
                $("#chart").igCategoryChart("option", "yAxisMinorInterval", interval);
                $("#yAxisMinorIntervalLabel").text(interval);
            }
        });

    </script>
</body>
</html>
Ignite UI for jQuery | Samples

Search Results

Category Chart - Axis Lines

Code View
