c3js

by ti2005

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 style="max-width: 80px">
  <div id="chart1"></div>
</div>
<div id="chart"></div>

CSS

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

.tick line {
  display: none;
}

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],
      ['data2', 130, 100, 140, 200, 150, 50],
      ['data3', 130, 100, 140, 200, 150, 50]
    ],
    type: 'bar'
  },
  color: {
    pattern: ["#ff9900", "#036000", "#cacaca"]
  },
  axis: {
    rotated: true,
    x: {
      type: 'category', // this needed to load string x value
      tick: {
        outer: false
      }
    },
    y: {
      tick: {
        outer: false
      }
    }
  },
  grid: {
    lines: {
      front: false
    },
    x: {
      lines: [{
          value: "M"
        },
        {
          value: "T"
        },
        {
          value: "W"
        },
        {
          value: "TH"
        },
        {
          value: "F"
        },
        {
          value: "SA"
        },
        {
          value: "SU"
        }
      ]
    }
  },
  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; }
        
                      if (! text) {
                        title = titleFormat ? titleFormat(data[i].x) : data[i].x;
                        text = "<div id='tooltip' class='d3-tip'>";
                      }
                      value = valueFormat(data[i].value, data[i].ratio, data[i].id, data[i].index);
                   ...