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
float is removed.
<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