Here's a Horizontal Bar chart clearly indicating the 2016 UK referendum results. Let's not dwell on the disastrous nature of the vote though and look at the chart shall we?
It has a high marginInner
setting - though the bars are still quite thick
due to the height of the chart and the fact that there's only two values that are being
represented.
It uses the labelsAbove
setting, has tooltips
and the number of X axis
labels has been increased. The number of vertical background grid lines has been increased to match
the number of labels.
The responsive()
function reduces the size of the chart, the text that's on the chart,
slightly reduces the marginInner
and reduces the number of X axis labels that you see.
It also removes the CSS float
on the canvas tag.
And finally, it's animated using the grow()
effect - which is a linear growing effect.
<script src="RGraph.common.core.js"></script> <script src="RGraph.common.tooltips.js"></script> <script src="RGraph.common.dynamic.js"></script> <script src="RGraph.hbar.js"></script>Put this where you want the chart to show up:
<canvas id="cvs" width="600" height="275"> [No canvas support] </canvas>This is the code that generates the chart: