# Popular coding languages

This Horizontal Bar chart does not use the `yaxisLabels` option but instead has a minimal `marginLeft` setting and then uses some custom code in the `draw` event to manually draw some labels. It also uses the `labelsAbove` option to indicate the percentages for each bar.

The `grow` effect is employed to animate the chart.

If the `draw` event wasn't used and the labels were simply added after the chart had been drawn then they would disappear when the `canvas` is cleared for the second frame of the animation. And that happens so fast that it would seem like they just aren't being drawn.

The `responsive` function doesn't do much - it simply changes the width and height of the `canvas` tag and changes the `CSS` `float` that's applied to the container of the `canvas`.

This chart has been updated in March 2020 to add tooltips that use formatting and the highlighting color has been updated to a gradient so that the labels on the left-hand-side are unobscured.

This goes in the documents header:

    <script src="RGraph.common.core.js"></script>
    <script src="RGraph.common.dynamic.js"></script>
    <script src="RGraph.common.tooltips.js"></script>
    <script src="RGraph.hbar.js"></script>

Put this where you want the chart to show up:

    <div style="float: right">
        <canvas id="cvs" width="600" height="350">[No canvas support]</canvas>
    </div>

This is the code that generates the chart - it should be placed AFTER the `canvas` tag(s):