JSFiddle - React, Tailwind, and code Playground

by Peter Galiba

HTML

<div id="raphael-canvas">
    <table>
      <caption>13 articles in the last 30 days</caption>
      <thead>
        <th data-color="#336699">This mont</th>
        <th data-color="#F58025">Last month</th>
        <th data-color="#FBB03B">Examiner.com
30 day average</th>
      </thead>
      <tbody>
        <tr>
          <td>3</td>
          <td>6</td>
          <td>7</td>
        </tr>
      </tbody>
    </table>
  </div>

CSS

#raphael-canvas svg {
      border: 1px solid #000;
    }

JavaScript

/*global document, window, Raphael*/
(function (Raphael) {
  var canvas = document.getElementById('raphael-canvas'),
      table = canvas.getElementsByTagName('table')[0],
      paper = new Raphael(canvas, 360, 235),
      fontFamily = 'sans-serif';

  function getText(el) {
    return el ? (el.textContent ? el.textContent : el.innerText) : '';
  }

  function drawChart(rows, head, max) {
    var i = 1,
        j, l, label,
        k = rows.length,
        labels = paper.set(),
        step = 130 / max,
        top = 206,
        left = 40,
        width = 300, path,
        textTop = 215,
        fontSize = 11,
        lines,
        xstep = (width) / k;

    for (; i <= max; i += 1) {
      labels.push(paper.text(19, top - (i)  * step, i.toFixed(1)));
      paper.path('M' + left + ',' + (top - (i) * step) + ' l' + 300 + ',0').attr({
        stroke: '#f2f2f2'
      });
    }
    labels.attr({
      'font-family': fontFamily,
      'font-size': 10,
      'fill': '#999',
      'text-anchor': 'start'
    });

    labels = paper.set();
    for (i = 0, l = head.length; i < l; i += 1) {
      label = paper.text(left + xstep * (i + 0.5), textTop, getText(head[i]));
      lines = label.attr('text').match(/\n/g);
      if (lines) {
        label.attr('y', textTop - (fontSize / 2) + label.getBBox().height / (lines.length + 1));
      }
      labels.push(label);
      paper.rect(left + xstep * i + 10, top - getText(rows[i]) * step, xstep - 20, getText(rows[i]) * step).attr({
        fill: head[i].getAttribute('data-color'),
        stroke: 'none'
      });
    }
    labels.attr({
      'font-family': fontFamily,
      'font-size': 11,
      'fill': '#666'
    });
  }

  function parseTable(table) {
    var caption = getText(table.caption).match(/^\s*(\d+)\s*(.*)/),
        thead = table.tHead.rows[0].cells,
        tbody = table.tBodies[0].rows[0].cells,
        labels = paper.set(),
        bbox;

    table.style.display = 'none';

    bbox = paper.text(15, 35,...