JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://nvd3.org/js/lib/jquery.min.js"></script>
<script src="http://nvd3.org/nv.d3.js"></script>
<link rel="stylesheet" href="http://nvd3.org/src/nv.d3.css">
<div id="chart">
    <svg></svg>
</div>

CSS

#chart svg {
    height: 400px;
}

JavaScript

nv.addGraph(function () {
    var chart = nv.models.lineChart();

    chart.xAxis.axisLabel('Mois');

    chart.xAxis.tickFormat(function (d) {
        return d3.time.format('%b')(new Date(d))
    });


    chart.yAxis.axisLabel('Pourcentage');
    //chart.forceY([0, 100]);

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

    nv.utils.windowResize(chart.update);
    return chart;
});

data = [{
    "values": [{
        "x": 1028088000000,
            "y": 25
    }, {
        "x": 1030766400000,
            "y": 35
    }, {
        "x": 1033358400000,
            "y": 45
    }, {
        "x": 1036040400000,
            "y": 55
    }, {
        "x": 1038632400000,
            "y": 60
    }],
        "key": 'Echéance habitation payée',
        "color": '#2E3FD3'
}, {
    "values": [{
        "x": 1028088000000,
            "y": 20
    }, {
        "x": 1030766400000,
            "y": 30
    }, {
        "x": 1033358400000,
            "y": 40
    }, {
        "x": 1036040400000,
            "y": 50
    }, {
        "x": 1038632400000,
            "y": 60
    }],
        "key": 'Echéance voiture payée',
        "color": '#3CD32E'
}, {
    "values": [{
        "x": 1028088000000,
            "y": 10
    }, {
        "x": 1030766400000,
            "y": 15
    }, {
        "x": 1033358400000,
            "y": 20
    }, {
        "x": 1036040400000,
            "y": 25
    }, {
        "x": 1038632400000,
            "y": 35
    }],
        "key": 'Séminaire remboursé',
        "color": '#C40B18'
}];