JSFiddle - React, Tailwind, and code Playground

by Ravinder Bhardwaj

HTML

<link rel="stylesheet" href="https://rawgit.com/novus/nvd3/v1.1.15-beta/nv.d3.min.css">
<script src="https://code.angularjs.org/1.2.16/angular.js"></script>
<script src="https://rawgit.com/mbostock/d3/master/d3.min.js"></script>
<script src="https://rawgit.com/novus/nvd3/v1.1.15-beta/nv.d3.min.js"></script>
<script src="https://rawgit.com/krispo/angular-nvd3/v0.1.1/dist/angular-nvd3.js"></script>
<body ng-app="multichart" ng-controller="MainCtrl">
    <nvd3 options="options" data="data"></nvd3>
</body>

CSS

.tick line {display: none;}

JavaScript

var app = angular.module('multichart', ['nvd3']);

app.controller('MainCtrl', function ($scope) {
    $scope.options = {
        chart: {
            type: 'multiChart',
            height: 400,
            margin: {
                top: 30,
                right: 60,
                bottom: 50,
                left: 70
            },
            color: ['#004472', '#008080', '#009907', '#8EC100', '#C4D300', '#FFCE00', '#1F106B', '#FF0068', '#C3E1EC'],
            useInteractiveGuideline: true,
            transitionDuration: 200,
            xAxis: {
                axisLabel: 'X Axis',
                tickFormat: function (d) {
                    if (d > 0) {
                        return d3.time.format('%x')(new Date(d))
                    }
                    return null;
                }
            },
            yAxis1: {
                axisLabel: 'Y1 Axis',
                tickFormat: function (d) {
                    return d3.format(',f')(d);
                },
            },
            yAxis2: {
                axisLabel: 'Y2 Axis',
                tickFormat: function (d) {
                    return '$' + d3.format(',.2f')(d)
                },
            },
            legend: {
                x: 0,
                y: 0
            },
            tooltip: {
                duration: 100,
                gravity: 'w',
                distance: 5,
                snapDistance: 0,
                enabled: true,
                hideDelay: 400,
                headerEnabled: true,
                position: {
                    left: null,
                    top: null
                },
                offset: {
                    left: 0,
                    top: 0
                },
                hidden: true,
            },
            showLegend: true,
            interpolate: 'monotone',
            tooltips: true,
            useVoronoi: true
        }
    };

    $scope.data = [{
        "key": "Series 1",
        "type": "bar",
    ...