c3js

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.10/c3.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.10/c3.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<div id="chart"></div>

CSS

.c3-xgrid-line line {
    stroke: #DEE0E1;
}

.tick line {
    display: none;
}

.border {
    stroke: #000;
    fill: transparent;
}

.whiteborder {
    stroke: white;
    fill: transparent;
    stroke-width: 3;
}

JavaScript

var chart = c3.generate({
        bindto: '#chart',
        data: {
            x : 'x',
            columns: [
                ['x', 'M','T','W','TH','F','SA','SU'],
                ['revenue', 200, 300, 200, 400, 500, 700, 600.56]
            ],
            type: 'bar'
        },
        color: {
            pattern: ["#ff9900"]
        },
        axis: {
            x: {
                type: 'category', // this needed to load string x value
                tick: {
                    outer: false
                }
            },
            y: {
                tick: {
                    outer: false
                }
            }
        },
        regions: [
            { axis: 'x', start: -0.5, end: 0, class: 'border' },
            { axis: 'x', start: -0.5, end: 1, class: 'border' },
            { axis: 'x', start: -0.5, end: 2, class: 'border' },
            { axis: 'x', start: -0.5, end: 3, class: 'border' },
            { axis: 'x', start: -0.5, end: 4, class: 'border' },
            { axis: 'x', start: -0.5, end: 5, class: 'border' },
            { axis: 'x', start: -0.5, end: 6, class: 'border' },
            { axis: 'x', start: -0.5, end: 7, class: 'whiteborder' },
        ],
        bar: {
            width: {
                ratio: 0.4
            }
        },
        legend: {
            hide: true
        },
        tooltip: {
            contents: function (data, defaultTitleFormat, defaultValueFormat, color) {
                    var $$ = this, config = $$.config,
                        titleFormat = config.tooltip_format_title || defaultTitleFormat,
                        nameFormat = config.tooltip_format_name || function (name) { return name; },
                        valueFormat = config.tooltip_format_value || defaultValueFormat,
                        text, i, title, value;

                        for (i = 0; i < data.length; i++) {
                            if (! (data[i] && (data[i].value || data[i].value === 0))) { continue;...