How to get rounded corners on a Bar chart

This is a former HOWTO document that showed you how to get rounded corners on your Bar chart. It has now been updated for the new corners option.

[No canvas support]

This page previously detailed how to get rounded corners on your Bar chart. This involved a lot of code and necessitated you to redefine the canvas rect() API function.

Now, however, there's a corners option for the Bar chart which does everything for you. As you will see if you press the button, animations are catered for too.

Here's the source code for the chart on the right which demonstrates the corners option. There's also a cornersRoundRadius option as well which allows you to control the extent of the rounding effect.

<script>
    new RGraph.Bar({
        id: 'cvs',
        data: [12,13,16,15,16,19,19,12,23,16,13,24],
        options: {
            marginTop: 35,
            marginLeft: 35,
            title: 'A Bar chart with rounded corners',
            titleSize: 16,
            titleBold: true,
            xaxisLabels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
            tooltips: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
            backgroundGridVlines: false,
            backgroundGridBorder: false,
            xaxis: false,
            yaxis: false,
            colors: ['Gradient(#f33:red)'],
    
            corners: 'round',
            cornersRoundRadius: 50
        }
    }).draw();
</script>