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.
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. Animations are no problem either.
Here's the source code for the chart shown here 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],
options: {
marginTop: 35,
marginLeft: 55,
marginInner: 20,
title: 'Percentage of goods sold',
titleSize: 16,
xaxisLabels: '%{property:_days_short[%{index}]}',
_days_short: ['Mon','Tue','Wed','Thur','Fri','Sat','Sun'],
_days: ['Mon','Tuesday','Wednesday','Thursday','Friday','Saturday','Sunday'],
tooltips: '%{property:_days[%{dataset}]}: %{value}%',
tooltipsCss: {
fontSize: '20pt'
},
yaxisScaleUnitsPost: '%',
textSize: 16,
corners: 'round',
cornersRoundRadius: 10
}
}).wave();
</script>