A black and orange SVG Horizontal Bar chart
This is a Horizontal Bar that is actually made up of two seperate objects. The first is the gray backgrounds 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 HBar). 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 graphs 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 HBar objects below. The DIV tag that the SVG uses is itself wrapped in another DIV tag and its this one that has CSS applied to it.
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="padding: 15px">
<div style="width: 500px; height: 300px; float: right" id="chart-container"></div>
</div>
This is the code that generates the chart:
<script>
data = [70,80,60,50,40,80];
labels = ['JavaScript','HTML','CSS','React','Ruby','Python'];
new RGraph.SVG.HBar({
id: 'chart-container',
data: [1,1,1,1,1,1],
options: {
colors: ['gray'],
xaxisScale: false,
backgroundGrid: false,
vmargin: 5,
yaxisLabels: labels,
textColor: 'rgba(0,0,0,0)',
labelsAbove: true,
labelsAboveColor: 'white',
labelsAboveSpecific: data
}
}).draw();
new RGraph.SVG.HBar({
id: 'chart-container',
data: data,
options: {
colors: ['orange'],
textColor: 'white',
yaxisLabels: labels,
xaxisScale: false,
backgroundGrid: false,
vmargin: 5
}
}).wave();
</script>