Yagr 2ml points

by Dat

HTML

<script src="https://unpkg.com/@gravity-ui/[email protected]/dist/yagr.iife.js"></script>
<link rel="stylesheet" href="https://unpkg.com/@gravity-ui/[email protected]/dist/index.css" />


<h1>2 000 000 Points / 5 000 lines</h1>
<div class="grid">
  <div id="chart1" class="container left"></div>
</div>

CSS

.container {
    margin-bottom: 26px;
    height: 600px;
    width: 100%;
  }

  .grid {
    height: 600px;
    display: flex;
    width: 100%;
    flex-direction: row;
    justify-content: space-between;
  }

JavaScript

const y1 = new Yagr(chart1, {
  timeline: new Array(400).fill().map((_, i) => i * 5),
  series: new Array(5000).fill().map((_, i) => ({
    data: new Array(400).fill().map((_, j) => Math.sin((j * 5 + i) / 100) * 5 + 2.5),
    // randomColor
    color: `rgb(${Math.random() * 255}, ${Math.random() * 255}, ${
                        Math.random() * 255
                    })`,
    width: 1,
  })),
});