Round Bar Corners

Building on the Quick Start example, you can round the corners of the bars in the chart using the clusterRadius option.

Note: The clusterRadius option applies to all bars in the chart, and does not actually have anything to do with clustered bars.

In the <head> section of your HTML file, replace the script that includes the document ready function with this one, which sets the clusterRadius option to round the bar corners by 5 pixels.

Round Bar Corners Script	Copy Code
<script id="scriptInit" type="text/javascript"> $(document).ready(function () { $("#wijbarchart").wijbarchart({ clusterRadius: 5, data: {x: ['Ford', 'GM', 'Chrysler', 'Toyota', 'Nissan', 'Honda']}, seriesList: [{ label: "2012 Auto Sales", legendEntry: true, data: { y: [.05, .04, .21, .27, .1, .24] } }, { label: "2011 Auto Sales", legendEntry: true, data: { y: [.17, .19, .12, -.06, .17, -.07] } }], }); }); </script>

Round Bar Corners Script

Copy Code

<script id="scriptInit" type="text/javascript">
    $(document).ready(function () {
        $("#wijbarchart").wijbarchart({
            clusterRadius: 5,
            data: {x: ['Ford', 'GM', 'Chrysler', 'Toyota', 'Nissan', 'Honda']},
            seriesList: [{
                label: "2012 Auto Sales",
                legendEntry: true,
                data: { y: [.05, .04, .21, .27, .1, .24] }
            },
           {
                label: "2011 Auto Sales",
                legendEntry: true,
                data: { y: [.17, .19, .12, -.06, .17, -.07] }
            }],
        });
    });
</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 bar corners rounded by 5 pixels.

Reference

Widgets

BarChart Quick Start