JSFiddle - React, Tailwind, and code Playground

by sberube

HTML

<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.8.6/nv.d3.min.css" />
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.9/angular.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.8.6/nv.d3.min.js"></script>
  <style>
    .bar-overlay-label {
      font-size: 12px;
      text-anchor: middle;
    }

    .top-label {
      fill: #000;
    }

    .bottom-label {
      fill: #fff;
    }
  </style>
</head>

<body>
  <div ng-app="plunker" ng-controller="MainCtrl">
    <nvd3 options="options" data="data"></nvd3>
  </div>

  <script>
    var app = angular.module('plunker', ['nvd3']);

    app.controller('MainCtrl', function($scope) {
      $scope.options = {
        chart: {
          type: 'multiBarChart',
          height: 450,
          margin: {
            top: 30,
            right: 60,
            bottom: 50,
            left: 70
          },
          color: d3.scale.category10().range(),
          duration: 500,
          stacked: true,
          showControls: false,
          xAxis: {
            axisLabel: 'X Axis'
          },
          yAxis: {
            axisLabel: 'Y Axis',
            axisLabelDistance: -20,
            tickFormat: function(d) {
              return d3.format(',.1f')(d);
            }
          },
          multibar: {
            dispatch: {
              renderEnd: function() {
                addOverlayBox();
              }
            }
          }
        }
      };

      $scope.data = generateData();

      function generateData() {
        return [
          {
            key: 'Bar 1',
            values: [
              { x: 1, y: 0.25 },
              { x: 2, y: 0.35 },
              { x: 3, y: 0.4 },
              { x: 4, y: 0.5 },
              { x: 5, y: 0.3 }
            ]
          },
          {
            key: 'Bar 2',
          ...