JSFiddle - React, Tailwind, and code Playground

by Othmen

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(),
      months = ['0','Jan','Fev','Mars','Avr','Mai','Juin','Juil','Aout','Sept','Oct','Nov','Dec'];

  chart.xAxis
      .axisLabel('Mois')
      .tickFormat(function(index) {
            return months[index];
      });
  
  			
  chart.yAxis
       .axisLabel('Pourcentage');
  chart.forceY([0, 100]);

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

  nv.utils.windowResize(chart.update);

  return chart;
});

function getPercent() {
  var habitation = [],
                voiture = [],
                seminaire = [];
                
        for(var i=0; i < 13; i++){
            habitation.push({x: i, y: Math.ceil((54 / 12) * i)});
            voiture.push({x: i, y: Math.ceil((18 / 12) * i)});
            seminaire.push({x: i, y: Math.ceil((10 / 12) * i)});
        };

        return [
            {
                values: habitation,
                key: 'Echéance habitation payée',
                color: '#2E3FD3'
            },
            {
                values: voiture,
                key: 'Echéance voiture payée',
                color: '#3CD32E'
            },
            {
                values: seminaire,
                key: 'Séminaire remboursé',
                color: '#C40B18'
            }
        ];
}