# A black and orange SVG Horizontal Bar chart

This is a Horizontal Bar that's made up of two separate objects. The first is the gray background for the bars that you can see. Then the orange Horizontal Bar is overlaid on top. The labels on the right are made up from the `labelsAbove` option (on the first, background Horizontal Bar). As you can see the chart uses the `wave` effect (the `wave` effect is not just a Bar chart effect but also available with the Horizontal Bar.).

By combining charts like this you can get a multitude of different effects that just wouldn't be feasible with just a single chart. You can examine the source code for both of the Horizontal Bar objects below. The `div` tag that the `SVG` uses is itself wrapped in another `div` tag and it's this one that has `CSS` applied to it.

This chart doesn't do a lot in terms of `responsive` features. It reduces in size a little, the text size is reduced and the `CSS` `float` is removed.

This goes in the documents header:

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

Put this where you want the chart to show up:

    <div style="float: right">
        <div style="width: 500px; height: 300px; display: inline-block; background-color: black" id="chart-container"></div>
    </div>

This is the code that generates the chart - it should be placed AFTER the `div` tag: