JSFiddle - React, Tailwind, and code Playground

by lukas vojt

HTML

<script src="//cdn.jsdelivr.net/bootstrap.responsive-tabs/0.0.1/responsive-tabs.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/nvd3/1.7.0/nv.d3.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<div>
      <!-- Nav tabs -->
      <ul class="nav nav-tabs responsive" role="tablist">
        <li role="presentation" class="active">
            <a href="#yearly" aria-controls="yearly" role="tab" data-toggle="tab">
                Dividends Yearly</a></li>
        <li role="presentation">
            <a href="#quaterly" aria-controls="#quaterly" role="tab" data-toggle="tab">
                Dividends Quarterly</a></li>
      </ul>

      <!-- Tab panes -->
      <div class="tab-content responsive">
        <div role="tabpanel" class="tab-pane active" id="yearly">
            <h2>Dividends</h2>
            <p>Prediction of Future Dividends: Latest dividend * Dividend frequency * Conservative DGR</p>
            <div id="dividendchart"><svg style="width:100%;height:400px" /></div>
        </div>
        <div role="tabpanel" class="tab-pane" id="quaterly">
            <h2>Dividends Quarterly</h2>
            <div id="dividendchart-quarterly"><svg style="width:100%;height:400px" /></div>
        </div>
      </div>
    </div>

JavaScript

function multiBarChartData() {
            return [
                {
                    "values": [
                        
                            { x: 2014 , y: 0.57 } , 
                        
                            { x: 2015 , y: 0.60 } , 
                        
                            { x: 2016 , y: 0 } 
                        
                    ],
                    "key": "Dividends"
                },
                {
                    "values": [
                        
                            { x: 2014 , y: 0 } , 
                        
                            { x: 2015 , y: 0.40 } , 
                        
                            { x: 2016 , y: 1 } 
                        
                    ],
                    "key": "Future Dividends"
                }
            ]
        }
        nv.addGraph(function() {
            var multichart = nv.models.multiBarChart();

            multichart.xAxis.tickFormat(d3.format(String));

            multichart.yAxis
                .tickFormat(function(d) { return '$' + d3.format(',05f')(d) });

            multichart.multibar.stacked(true); // default to stacked
            multichart.showControls(false); // don't show controls

            d3.select('#dividendchart svg')
                .datum(multiBarChartData())
              .transition().duration(500).call(multichart);

            nv.utils.windowResize(multichart.update);

            return multichart;
        });

function dividendQuarterlyData() {
            return [
                {
                    "values": [
                        
                            
                            { x: 2014, y: 0 } , 
                            
                        
                            
                        
                            
                        
                            
                        
                            
                            { x: 2015, y: 0.40 }...