JSFiddle - React, Tailwind, and code Playground

by lkshminarayanan

HTML

<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="https://raw.github.com/novus/nvd3/master/nv.d3.js"></script>
<link rel="stylesheet" href="https://raw.github.com/novus/nvd3/master/src/nv.d3.css">
<div id="chart">
    <svg></svg>
</div>

CSS

#chart svg {
    height: 400px;
}
/* nvd3 css */

/********************
 * HTML CSS
 */
 .chartWrap {
    margin: 0;
    padding: 0;
    overflow: hidden;
}
/********************
 * TOOLTIP CSS
 */
 .nvtooltip {
    position: absolute;
    background-color: rgba(255, 255, 255, 1);
    padding: 1px;
    border: 1px solid rgba(0, 0, 0, .2);
    z-index: 10000;
    font-family: Arial;
    font-size: 13px;
    transition: opacity 500ms linear;
    -moz-transition: opacity 500ms linear;
    -webkit-transition: opacity 500ms linear;
    transition-delay: 500ms;
    -moz-transition-delay: 500ms;
    -webkit-transition-delay: 500ms;
    -moz-box-shadow: 0 5px 10px rgba(0, 0, 0, .2);
    -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, .2);
    box-shadow: 0 5px 10px rgba(0, 0, 0, .2);
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
    pointer-events: none;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.nvtooltip.x-nvtooltip, .nvtooltip.y-nvtooltip {
    padding: 8px;
}
.nvtooltip h3 {
    margin: 0;
    padding: 4px 14px;
    line-height: 18px;
    font-weight: normal;
    background-color: #f7f7f7;
    text-align: center;
    border-bottom: 1px solid #ebebeb;
    -webkit-border-radius: 5px 5px 0 0;
    -moz-border-radius: 5px 5px 0 0;
    border-radius: 5px 5px 0 0;
}
.nvtooltip p {
    margin: 0;
    padding: 5px 14px;
    text-align: center;
}
.nvtooltip span {
    display: inline-block;
    margin: 2px 0;
}
.nvtooltip-pending-removal {
    position: absolute;
    pointer-events: none;
}
/********************
 * SVG CSS
 */
 svg {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    /* Trying to get SVG to act like a greedy block in all browsers */
    display: block;
    width:100%;
   ...

JavaScript

var data = function (start) {
    var line1 = [],
        line2 = [];

    for (var i = start; i < start + 50; i++) {
        line1.push({
            x: i,
            y: 2 * i
        });
        line2.push({
            x: i,
            y: 3 * i
        });
    }

    return [{
        values: line1,
        key: 'y = 2 * x',
        color: '#ff7f0e'
    }, {
        values: line2,
        key: 'y = 3 * x',
        color: '#2ca02c'
    }];
}



var chart = nv.models.lineChart();

chart.xAxis.axisLabel('x')
    .tickFormat(d3.format(',r'));

chart.yAxis.axisLabel('y')
    .tickFormat(d3.format(',r'));

d3.select('#chart svg')
    .datum(data(0))
    .transition().duration(500)
    .call(chart);

nv.utils.windowResize(chart.update);

d3.selectAll(".nv-point").on("click", function () {
    alert("clicked");
});