JSFiddle - React, Tailwind, and code Playground

by Adarsh Gowda

HTML

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<link rel="stylesheet" href="http://cdn.oesmith.co.uk/morris-0.5.1.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script>
<script src="http://cdn.oesmith.co.uk/morris-0.5.1.min.js"></script>
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 track3">
                            <div id="graph2"></div>
</div>

JavaScript

Morris.Donut({
                              element: 'graph2',
                              data: [
                                {value: 70, label: 'IN-STORE', formatted: 'approx. 70%' },
                                {value: 30, label: 'OUT-STORE', formatted: 'approx. 30%' },
                             
                              ],
                              backgroundColor: '#f5f5f5',
                              labelColor: '#000',
                              gridTextSize: '11',
                              hideHover: 'auto',
                              resize: true,
                              colors: [
                                '#1d70b7',
                                '#5ba5e4',
                                
                              ],
                                 formatter: function (x, data) { return data.formatted; }
                            });