Available in the Full Version
Category Chart - Axis Titles
This is a basic example showing the category chart axis titles.
This sample uses CTP (Community Technical Preview) features. The API and behavior may change when these features are released with full support.
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 Titles</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.1/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet" />
<link href="http://cdn-na.infragistics.com/igniteui/2024.1/latest/css/structure/infragistics.css" rel="stylesheet" />
<!-- Ignite UI for jQuery Required Combined JavaScript Files -->
<script src="http://cdn-na.infragistics.com/igniteui/2024.1/latest/js/infragistics.core.js"></script>
<script src="http://cdn-na.infragistics.com/igniteui/2024.1/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>Title Margin:</label>
<label id="xAxisTitleMargin" class="values">5</label>
<div id="xAxisTitleMarginSlider" class="slider"></div>
</div>
<div>
<label>Title Font:</label>
<label id="xAxisTitleFontSize" class="values">10</label>
<div id="xAxisTitleFontSizeSlider" class="slider"></div>
</div>
<div>
<label>Title Angle:</label>
<label id="xAxisTitleAngle" class="values">0</label>
<div id="xAxisTitleAngleSlider" class="slider"></div>
</div>
<label>Title Color:</label>
<div>
<select class="selector" id="xAxisTitleColorPicker">
<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>Title Margin:</label>
<label id="yAxisTitleMargin" class="values">5</label>
<div id="yAxisTitleMarginSlider" class="slider"></div>
</div>
<div>
<label>Title Font:</label>
<label id="yAxisTitleFontSize" class="values">10</label>
<div id="yAxisTitleFontSizeSlider" class="slider"></div>
</div>
<div>
<label>Title Angle:</label>
<label id="yAxisTitleAngle" class="values">0</label>
<div id="yAxisTitleAngleSlider" class="slider"></div>
</div>
<label>Title Color:</label>
<div>
<select class="selector" id="yAxisTitleColorPicker">
<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>
<script type="text/javascript">
var data = [
{ "Year": "1995", "Brazil": 161, "Indonesia": 197, "United States": 266, "India": 920, "China": 1297 },
{ "Year": "2005", "Brazil": 186, "Indonesia": 229, "United States": 295, "India": 1090, "China": 1216 },
{ "Year": "2015", "Brazil": 204, "Indonesia": 256, "United States": 322, "India": 1251, "China": 1361 },
{ "Year": "2025", "Brazil": 218, "Indonesia": 277, "United States": 351, "India": 1396, "China": 1394 }
];
// CODE SNIPPET
$(function () {
$("#chart").igCategoryChart({
dataSource: data,
xAxisTitle: "X-Axis Title",
yAxisTitle: "Y-Axis Title",
xAxisTitleTextColor: "gray",
yAxisTitleTextColor: "gray",
xAxisTitleTextStyle: "10pt Verdana",
yAxisTitleTextStyle: "10pt Verdana",
xAxisTitleTopMargin: 5,
xAxisTitleBottomMargin: 5,
yAxisTitleRightMargin: 5,
yAxisTitleLeftMargin: 5,
xAxisTitlelAngle: 0,
yAxisTitlelAngle: 90,
});
});
// CODE SNIPPET
$("#chart").igCategoryChart({ title: "Population per Country" });
$("#chart").igCategoryChart({
yAxisFormatLabel: function (value) {
return value + " M";
}
});
// event handlers
$("#xAxisTitleColorPicker").change(function (e) {
var brush = $(this).val();
$("#chart").igCategoryChart("option", "xAxisTitleTextColor", brush);
});
$("#xAxisTitleMarginSlider").slider({
min: 0, max: 25, value: 5,
slide: function (e, ui) {
$("#chart").igCategoryChart("option", "xAxisTitleTopMargin", ui.value);
$("#chart").igCategoryChart("option", "xAxisTitleBottomMargin", ui.value);
$("#xAxisTitleMargin").text(ui.value);
}
});
$("#xAxisTitleFontSizeSlider").slider({
min: 5, max: 15, value: 10,
slide: function (e, ui) {
var size = ui.value + "pt";
var style = size + " " + "Verdona";
$("#chart").igCategoryChart("option", "xAxisTitleTextStyle", style);
$("#xAxisTitleFontSize").text(ui.value);
}
});
$("#xAxisTitleAngleSlider").slider({
min: -90, max: 90, value: 0,
slide: function (e, ui) {
$("#chart").igCategoryChart("option", "xAxisTitleAngle", ui.value);
$("#xAxisTitleAngle").text(ui.value);
}
});
$("#yAxisTitleColorPicker").change(function (e) {
var brush = $(this).val();
$("#chart").igCategoryChart("option", "yAxisTitleTextColor", brush);
});
$("#yAxisTitleMarginSlider").slider({
min: 0, max: 25, value: 5,
slide: function (e, ui) {
$("#chart").igCategoryChart("option", "yAxisTitleLeftMargin", ui.value);
$("#chart").igCategoryChart("option", "yAxisTitleRightMargin", ui.value);
$("#yAxisTitleMargin").text(ui.value);
}
});
$("#yAxisTitleFontSizeSlider").slider({
min: 5, max: 15, value: 10,
slide: function (e, ui) {
var size = ui.value + "pt";
var style = size + " " + "Verdona";
$("#chart").igCategoryChart("option", "yAxisTitleTextStyle", style);
$("#yAxisTitleFontSize").text(ui.value);
}
});
$("#yAxisTitleAngleSlider").slider({
min: -90, max: 90, value: 0,
slide: function (e, ui) {
$("#chart").igCategoryChart("option", "yAxisTitleAngle", ui.value);
$("#yAxisTitleAngle").text(ui.value);
}
});
</script>
</body>
</html>