JSFiddle - React, Tailwind, and code Playground

HTML

<div class="graph_content">
    <svg id="svg"></svg>
</div>

JavaScript

nv.addGraph(function() {
                   
                    chart2 = nv.models.lineChart()
                       .options({
                            transitionDuration: 300,
                            useInteractiveGuideline: true
                        })
                    ;
                    chart2.xAxis
                    .ticks(7)
                    .tickFormat(function(d) {
                        return d3.time.format.utc('%b %d')(new Date(d));
                    });


                    chart2.xAxis.scale().ticks(Math.abs(chart2.xAxis.scale().range()[1] - 				           chart2.xAxis.scale().range()[0]) / 100);

                    chart2.yAxis
                        .tickFormat(d3.format(',f'))
                    ;
					
                    d3.select('svg#svg')
                        .datum(this.graphFunction(data))
                        .call(chart2);

                    nv.utils.windowResize(chart2.update);

                    return chart2;
});

graphfunction: funtion(data){
      var svgdata = [],
        xAxisTickValues = [];
        svgdata = $.map(data.items, function(val, index){
                    var dateObj = new Date(val.date);
                     xAxisTickValues.push(dateObj);

                    return {x: dateObj, y: val.qty};
                });

        return [
            {
                area: true,
                values: svgdata,
                xAxisTickValues:xAxisTickValues,
                color: "#9FE6A7"
            }
        ]; 
}