JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>D3 Stacked Bar and Line Chart</title>
    <script src="https://d3js.org/d3.v5.min.js"></script>
  </head>
  <style>
    .dot {
  display: none;
}

.line-segment {
  fill: none;
  stroke: steelblue;
  stroke-width: 2;
}

.line-text {
  font-size: 12px;
  font-weight: bold;
}

  </style>
  <body>
    <div id="main-chart">
        <svg width="960" height="500"></svg>
    </div>
    <div id="legends-container">
        <button>Legend</button>
        <svg id="legend" width="960" height="100"></svg>
    </div>

    
  <script>
    const data = [
  { year: "2015", value: 120 },
  { year: "2016", value: 200 },
  { year: "2017", value: 300 },
  { year: "2018", value: 400 },
  { year: "2019", value: 500 }
];

const margin = { top: 20, right: 20, bottom: 30, left: 50 };
const width = 600 - margin.left - margin.right;
const height = 400 - margin.top - margin.bottom;

const svg = d3.select("body").append("svg")
  .attr("width", width + margin.left + margin.right)
  .attr("height", height + margin.top + margin.bottom)
  .append("g")
  .attr("transform", `translate(${margin.left},${margin.top})`);

const xScale = d3.scaleBand()
  .range([0, width])
  .domain(data.map(d => d.year))
  .padding(0.2);

const yScale = d3.scaleLinear()
  .range([height, 0])
  .domain([0, d3.max(data, d => d.value)]);

const line = d3.line()
  .x(d => xScale(d.year) + xScale.bandwidth() / 2)
  .y(d => yScale(d.value))
  .defined(function(d) {return !isNaN(d)});

svg.append("g")
  .attr("transform", `translate(0, ${height})`)
  .call(d3.axisBottom(xScale));

svg.append("g")
  .call(d3.axisLeft(yScale));

  svg.selectAll(".line-segment")
  .data(data.slice(0, -1))
  .enter().append("path")
  .attr("class", "line-segment")
  .attr("d", d => {
    const x1 = xScale(d.year) + xScale.bandwidth() / 2;
    const x2 = xScale(data[data.indexOf(d) + 1].year) + xScale.bandwidth() / 2;
    const y1 = yScale(d.value);
    const y2 =...

CSS

.numberCircle {
    border-radius: 50%;
    behavior: url(PIE.htc); /* remove if you don't care about IE8 */

    width: 36px;
    height: 36px;
    padding: 8px;
    
    background: #fff;
    border: 2px solid #666;
    color: #666;
    text-align: center;
    
    font: 32px Arial, sans-serif;
}