Building on the Quick Start example, you can rotate the labels that appear on each bar in the chart using either of two methods. One uses the chartLabelStyle option, and the other accesses the chartLabels using the data fields chartElements collection.
To format the numeric values of these labels, use the chartLabelFormatString option. To hide them, use the showChartLabels option.
 |
Note: The latest Raphaël JavaScript Library combines scale, rotate and translate within the transform attribute. This means that if you try to use the rotation attribute alongside the transform attribute, rotation is overwritten. If you want to reposition the label as well as rotate it, use the transform attribute for both. See the transform attribute of chartLabelStyle for more information. |
- In the <head> section of your HTML file, replace the script that includes the document ready function with this one, which sets the chartLabelStyle option to rotate the labels by 90 degrees.
Drop down and copy code
| Rotate Bar Labels Script |
Copy Code
|
<script id="scriptInit" type="text/javascript">
$(document).ready(function () {
$("#wijbarchart").wijbarchart({
chartLabelStyle: {rotation: 90},
seriesList: [{
label: "2012 Auto Sales",
legendEntry: true,
data: {
x: ['Ford', 'GM', 'Chrysler', 'Toyota', 'Nissan', 'Honda'],
y: [.05, .04, .21, .27, .1, .24]
}
}],
});
});
</script>
|
Or replace it with this one, which accesses the chartLabels collection to rotate the labels. Drop down and copy code
| Rotate Bar Labels Script |
Copy Code
|
<script id="scriptInit" type="text/javascript">
$(document).ready(function () {
$("#wijbarchart").wijbarchart({
seriesList: [{
label: "2012 Auto Sales",
legendEntry: true,
data: {
x: ['Ford', 'GM', 'Chrysler', 'Toyota', 'Nissan', 'Honda'],
y: [.05, .04, .21, .27, .1, .24]
}
}],
});
var data = $("#wijbarchart").wijbarchart().data();
var labels = data.fields.chartElements.chartLabels;
$.each(labels, function (key, value) {
value.rotate("90 deg");
});
});
</script>
|
- No changes are necessary in the <body> section of your HTML file. The basic <div> tag is sufficient to create the chart.
- Save your HTML file and open it in a browser. The chart appears like the one in the image below, with the labels rotated by 90 degrees.
See Also
Reference
Concepts
Widgets
