JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.9.2/d3.js"></script>
<div class="Chart_wrapper"></div>

SCSS

.Chart_wrapper {
    margin-top: 60px;
    padding-left: 32px;
}
.Chart_curved {
  fill: none;
  stroke: #3194c6;
  shape-rendering: geometricPrecision;
}

JavaScript

const now = new Date().getTime();
        let xData = [new Date(1556668800 * 1000), new Date(1577836800 * 1000)]
        let yData = [0,25000,50000,100000];
        let data = [
            {
                date: 1556668800,
                amount: 0
            },
            {
                date: 1559347200,
                amount: 10000
            },
            {
                date: 1561939200,
                amount: 0
            },
            {
                date: 1564617600,
                amount: 10000
            },
            {
                date: 1567296000,
                amount: 0
            },
            {
                date: 1569888000,
                amount: 10000
            },
            {
                date: 1572566400,
                amount: 0
            },
            {
                date: 1575158400,
                amount: 10000
            },
            {
                date: 1577836800,
                amount: 0
            },
        ];

        let margin = {left: 30}
        let height = 130;
        let width = 800;

        let svg = d3.select('.Chart_wrapper')
                    .append('svg')
                    .attr('overflow', 'visible')
                    .attr('height', height + 20)
                    .attr('width', width)
                    .attr('transform', `translate(${margin.left}, 0)`)


        let xScale = d3.scaleTime()
                       .domain([xData[0], xData[1]])
                       .range([0, width]);
        svg.append('g')
           .attr('transform', `translate(0, ${height})`)
           .attr('class', 'xAxis')
           .call(d3.axisBottom(xScale).tickFormat(d3.timeFormat("%B")))

          
        let yScale = d3.scaleLinear()
                       .domain([0, d3.max(yData)])
                       .range([height, 0]);
        svg.append('g')
           .attr('class', 'yAxis')
           .call(d3.axisLeft(yScale).tickValues(yData).tickSize(0))

        var...