This is a Horizontal Bar chart where a single bar has been highlighted with a different color. The chart also has the labelsAbove
option enabled, uses the wave()
effect and also has the background grid disabled.
<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: 450px; height: 500px" id="chart-container"></div> </div>This is the code that generates the chart:
<script> // The data data = [0.1,0.2,0.3,3.2,0.2,0.5,0.5,0.2,0.4,0.8,0,0.1]; // Build the colors colors = RGraph.SVG.arrayFill({ array: [], length: data.length, value: '#164366' }); // Change the color of the fourth bar colors[3] = '#FDB515'; new RGraph.SVG.HBar({ id: 'chart-container', data: data, options: { backgroundGrid: false, xaxisScaleMax: 3.5, xaxis: false, xaxisScale: false, colors: colors, colorsSequential: true, yaxisLlabels: ['Norway','Australia','Netherlands','United States','New Zealand','Canada','Ireland','Germany','Sweden','Switzerland','Japan','England and Wales'], yaxisLabels: ['January','February','March','April','May','June','July','August','September','October','November','December'], labelsAbove: true, labelsAboveDecimals: 1, yaxisTickmarks: false } }).wave(); </script>