Rotate Bar Labels

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.

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>

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.

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>

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.

Reference

Concepts

Widgets