JSFiddle - React, Tailwind, and code Playground

by sberube

HTML

<!DOCTYPE html>
<html>
<head>
  <title>Angular-NVD3 MultiBarChart with Error Bar Example</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.8.6/nv.d3.min.css">
</head>
<body ng-app="myApp" ng-controller="myCtrl">
  <div chart-container>
    <nvd3 options="chartOptions" data="chartData"></nvd3>
  </div>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.8.2/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>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-nvd3/1.0.9/angular-nvd3.min.js"></script>
  <script>
    var app = angular.module('myApp', ['nvd3']);

    app.directive('chartContainer', function () {
      return {
        restrict: 'A',
        link: function (scope, element) {
          var chartContainer = element[0];

          // Generate random data
          var data = [
            {
              key: 'Series 1',
              values: [
                { x: 0, y: 5, error: 1 },
                { x: 1, y: 7, error: 0.5 },
                { x: 2, y: 3, error: 0.8 },
                { x: 3, y: 4, error: 0.2 },
                { x: 4, y: 6, error: 1.2 },
                { x: 5, y: 8, error: 0.7 }
              ]
            }
          ];

          // Create the chart
          nv.addGraph(function() {
            var chart = nv.models.multiBarChart()
              .x(function(d) { return d.x; })
              .y(function(d) { return d.y; })
              .showControls(true);

            chart.xAxis.axisLabel('X Axis');
            chart.yAxis.axisLabel('Y Axis');

            // Render the chart
            d3.select(chartContainer)
              .datum(data)
              .call(chart);

            // Add error bars
            chartContainer.querySelectorAll('.nv-bar').forEach(function(bar, index) {
              var barElement =...