d3 linechart

by k_sav

HTML

<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8">
    <title>Document</title>
  </head>

  <body>
    <svg class="svg"></svg>
  </body>

</html>

SCSS

.svg {
  text {
    fill: rgba(0, 0, 0, 0.47);
    font-size: 14px;
    line-height: 1;
    text-anchor: start;
  }

  .line {
    fill: none;
    stroke: #c8102e;
    stroke-width: 1px;
  }

  .y-axis {
    path {
      display: none;
    }

    .tick {
      line {
        stroke: #c1c1c1;
        stroke-width: 1px;
      }
    }
  }

  .x-axis {
    .domain {
      stroke: #c1c1c1;
      stroke-width: 1px;
    }
  }
}

JavaScript

const dataset = [{
      "moment": "2018-03-14",
      "val_prc": 0,
      "val_rub": 651573.83
    },
    {
      "moment": "2018-03-15",
      "val_prc": -0.18,
      "val_rub": 650378.16
    },
    {
      "moment": "2018-03-16",
      "val_prc": 0.93,
      "val_rub": 657633.22
    },
    {
      "moment": "2018-03-19",
      "val_prc": -0.24,
      "val_rub": 650012.09
    },
    {
      "moment": "2018-03-20",
      "val_prc": -0.91,
      "val_rub": 645619.39
    },
    {
      "moment": "2018-03-21",
      "val_prc": -0.59,
      "val_rub": 647702.98
    },
    {
      "moment": "2018-03-22",
      "val_prc": -0.39,
      "val_rub": 649028.2
    },
    {
      "moment": "2018-03-23",
      "val_prc": -0.66,
      "val_rub": 647251.33
    },
    {
      "moment": "2018-03-26",
      "val_prc": -1,
      "val_rub": 645037.53
    },
    {
      "moment": "2018-03-27",
      "val_prc": -1.74,
      "val_rub": 640242.97
    },
    {
      "moment": "2018-03-28",
      "val_prc": -0.97,
      "val_rub": 645237.98
    },
    {
      "moment": "2018-03-29",
      "val_prc": -0.7,
      "val_rub": 647028.82
    },
    {
      "moment": "2018-03-30",
      "val_prc": -0.44,
      "val_rub": 648697.05
    },
    {
      "moment": "2018-04-02",
      "val_prc": -0.96,
      "val_rub": 645328.79
    },
    {
      "moment": "2018-04-03",
      "val_prc": -1.61,
      "val_rub": 641075.02
    },
    {
      "moment": "2018-04-04",
      "val_prc": -2.65,
      "val_rub": 634322.06
    },
    {
      "moment": "2018-04-05",
      "val_prc": -3.01,
      "val_rub": 631949.94
    },
    {
      "moment": "2018-04-06",
      "val_prc": -1.71,
      "val_rub": 640405.6
    },
    {
      "moment": "2018-04-09",
      "val_prc": 21.22,
      "val_rub": 789860.31
    },
    {
      "moment": "2018-04-10",
      "val_prc": 37.84,
      "val_rub": 898161.44
    },
    {
      "moment": "2018-04-11",
      "val_prc": 45.28,
      "val_rub": 946624.12
    },
    {
      "moment":...