A dark and graduated blue Bar chart

A dark and graduated Bar chart. The colors are black at the bottom of the bars graduating to blue towards the top. The background grid is customised too with the horizontal grid lines having been disabled. Nor are there any labels. It uses the responsive function to enable it to reduce in size on smaller screens.

Another thing to note here is the complete lack of any labels. You don't always need to have labels on your charts, as the meaning may be clear without them - perhaps having a title elsewhere on the page. I wouldn't imagine that these use-cases are very common though - with most cases requiring at least a scale to make sense.

When the screen is smaller, not much happens - there's no text to reduce in size so the only thing that's done is the css float is removed and the marginInner is tweaked.

This goes in the documents header:

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

Put this where you want the graphic to show up:

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

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

<script>
    // This is not a complicated configuration - here the data is
    // separated out to its own variable.
    data = [6,4,5,5,7,4,8];

    // There's no labels or scale on this chart - 99% of the time
    // you do want at least a scale on your chart but sometimes
    // you will be able to omit it. Other than that, an RGraph
    // gradient is being used and there's no horizontal
    // background bars.
    bar = new RGraph.SVG.Bar({
        id: 'chart-container',
        data: data,
        options: {
            yaxisLabelsColor: 'gray',
            backgroundGridColor: '#999',
            backgroundGridHlines: false,
            colors: ['Gradient(#6969FF:#6969FF:#353566)'],
            xaxisLabels: ['Mon','Tue','Wed','Thu','Fri','Sat','Sun'],
            textColor:'white',
            textSize:16,
            responsive: [
                {maxWidth: null,width:600, height: 300,options: {marginInner:15},parentCss:{'float':'right',textAlign:'none'}},
                {maxWidth: 800, width:400, height: 200,options: {marginInner:10},parentCss:{'float':'none',textAlign:'center'}}
            ]
        }
    // Draw the chart and add some responsive capabilities
    }).draw();
</script>