.graph_wrap {
  padding-bottom: 30px;
  .graph_inner {
    position: relative;
    margin: 0 auto;
    width: 600px;
    height: 286px;
    padding-bottom: 86px;
    .graph_bg {
      position: relative;
      z-index: 10;
      display: flex;
      align-items: flex-end;
      padding: 0 15px;
      height: 100%;
      font-size: 0;
      line-height: 0;
      transform-origin: center;
      li {
        position: relative;
        display: inline-block;
        width: 57px;
        height: 200px;
        box-sizing: border-box;
        &:before {
          display: block;
          content: '';
          clear: both;
          position: absolute;
          left: 0;
          top: 0;
          width: 6px;
          height: 100%;
          background-color: #f3f4f5;
          border-radius: 6px;
        }
        @for $i from 1 through 10 {
          &:nth-child(#{$i}) {
            .graph_point {
              animation-delay: (0.1 * $i) + s;
            }
          }
        }
      }
    }
  }
}

.graph_title {
  position: absolute;
  z-index: 1;
  left: 0;
  bottom: -12px;
  display: inline-block;
  height: 20px;
  line-height: 20px;
  font-size: 16px;
  font-weight: 700;
  color: #666;
  transform: translate(-20%, 100%);
  text-align: center;
}
.graph_point {
  position: absolute;
  z-index: 1;
  display: block;
  margin: 0;
  padding: 0;
  width: 16px;
  height: 16px;
  border: 4px solid #6910ef;
  background-color: #fff;
  border-radius: 100%;
  left: -5px;
  cursor: pointer;
  transform: scale(0);
  animation: points .2s forwards;
  & > * {
    pointer-events: none;
  }
  &[aria-expanded="false"] + .graph_tip {
    display: none;
  }
}
.a11y {
  position: absolute;
  overflow: hidden;
  height: 1px;
  width: 1px;
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  word-break: initial;
  word-wrap: initial;
}
.graph_tip {
  position: absolute;
  left: 3px;
  top: -11px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 22px;
  border-radius: 4px;
  background-color: #6910ef;
  text-align: center;
  transform: translate(-50%, -100%);
  strong {
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
  }
  &:after {
    display: block;
    content: '';
    clear: both;
    position: absolute;
    z-index: 11;
    left: 12px;
    bottom: -6px;
    width: 0;
    height: 0;
    border: 6px solid transparent;
    border-bottom-width: 0;
    border-left-width: 5px;
    border-right-width: 5px;
    pointer-events: none;
    border-top-color: #6910ef;
  }
}
.graph_line {
  position: absolute;
  left: 11px;
  top: 86px;
  width: calc(100% - 12px);
  height: 200px;
  transform: scaleY(-1) scaleX(1);
  transform-origin: center;
  svg {
    padding: 8px;
    fill: none;
    width: 0;
    animation: polyline 2s forwards;
    polyline {
      stroke: rgba(105, 16, 239, 0.2);
      stroke-width: 4px;
    }
  }
}
@keyframes polyline {
  to {
    width: 649px;
  }
}
@keyframes points {
  to {
    transform: scale(1);
  }
} 

const chartDataY = [
  80, 75, 62, 85, 55, 90, 78, 20, 74, 66
]
const chartDataX = [
  0, 57, 114, 171, 228, 285, 342, 399, 456, 513
]
let chartData = '';
const chartBtnAll = document.querySelectorAll('.graph_point');
const btnClickEvt = () => {
  chartBtnAll.forEach((chartbtn) => {
    chartbtn.setAttribute('aria-expanded', 'false');
  });
  event.target.setAttribute('aria-expanded', 'true');
}

chartBtnAll.forEach((chartbtn, i) => {
 chartbtn.style.bottom = `${chartDataY[i]}%`;
 chartbtn.closest('li').querySelector('.graph_tip > strong').innerText = chartDataY[i];
  chartData += `${chartDataX[i]}, ${chartDataY[i] * 2} `; 
  chartbtn.addEventListener('click', btnClickEvt);
});

document.querySelector('svg polyline').setAttribute('points', chartData);