JSFiddle - React, Tailwind, and code Playground

by Abeee Doe

HTML

<script src="https://www.rgraph.net/libraries/RGraph.bar.js"></script>
<script src="https://www.rgraph.net/libraries/RGraph.common.core.js"></script>
<script src="https://www.rgraph.net/libraries/RGraph.common.dynamic.js"></script>
<script src="https://www.rgraph.net/libraries/RGraph.common.tooltips.js"></script>
<script src="https://www.rgraph.net/libraries/RGraph.common.zoom.js"></script>
<script src="https://www.rgraph.net/libraries/RGraph.drawing.text.js"></script>
<script src="https://www.rgraph.net/libraries/RGraph.common.key.js"></script>
<script src="https://www.rgraph.net/libraries/RGraph.common.effects.js"></script>
<div>
<canvas id='chart_column' width='500' height='250'>Chart GBP loading...</canvas>

</div>

CSS

div {
  border:solid 1px red;
}
canvas {
  border:solid 1px green;
}

JavaScript

var labels = ['Jul.18', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec', 'Jan19', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul'];


var chart = new RGraph.Bar('chart_column', [0, 0, 0, 0, 0, 0, 0, 0, 0, 165, 40, 489, 1011])
  .set('zoom.factor', 11)
  .set('shadow', true)
  .set('labels', ['Jul18', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec', 'Jan19', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul'])
  .set('shadow.offsetx', 5)
  .set('shadow.offsety', 5)
  .set('shadow.blur', 9)
  .set('gutter.left', 65) 
  .set('text.font', 'Segoe UI')
  .set('colors', ['#FF0000'])
  .set('align', 'left')
  .set('title.yaxis', 'GBP')
  .set('title.yaxis.size', 10)
  .set('title.yaxis.x', 7)
  .set('title.yaxis.y', 120)
  .set('title.yaxis.bold', false)
  .set('grid.hoverable', true)
  .set('tooltips.effect', 'fade')
  .set('tooltips', ['GBP 0', 'GBP 0', 'GBP 0', 'GBP 0', 'GBP 0', 'GBP 0', 'GBP 0', 'GBP 0', 'GBP 0', 'GBP 165', 'GBP 40', 'GBP 489', 'GBP 1,011'])
  .set('tooltips.event', 'mousemove')
  .on('mousemove', function(e, shape) {
    e.target.style.cursor = 'pointer';
  })
  .on('click', function myClick(e, shape) {
    var index = shape[5];
    alert(labels[index]);
  })
  .draw();