Stuck on an issue?
Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.
And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.
Transition between two large line charts freeze the browser while simple initial render is free
See original GitHub issueDescribe/explain the bug
First of all, thanks a lot for this awesome open source project. nivo clearly makes it simple to build charts in React applications.
When rendering a Line chart having an order of 1k elements (with some missing items) and trying to update it to other values (with roughly the same number of items), the transition between one chart to another makes the browser fully freeze (and sometimes crash).
While trying to workaround this issue, I tried to:
- Pass
animatetofalse, the animation is not rendered but the code is pretty laggy and can even crash on some computers - Rendering one chart, then unmounting it (with keys) to render the second one works and prevent both the lags and the crashes
- Canvas version works fine
To Reproduce
CodeSandbox with a repro: https://codesandbox.io/s/modern-glade-l00nt?file=/src/App.js
Snippet corresponding to the CodeSandbox
import { useState } from "react";
import { Line } from "@nivo/line";
export default function App() {
const [data, setData] = useState(data1);
return (
<div className="App">
<button onClick={() => setData(data2)}>Update</button>
<Line
animate={false}
width={500}
height={500}
data={data}
margin={{ top: 50, right: 110, bottom: 50, left: 60 }}
xScale={{ type: "point" }}
yScale={{
type: "linear",
min: "auto",
max: "auto",
stacked: true,
reverse: false
}}
axisTop={null}
axisRight={null}
axisBottom={null}
axisLeft={{
orient: "left",
tickSize: 5,
tickPadding: 5,
tickRotation: 0,
legend: "count",
legendOffset: -40,
legendPosition: "middle"
}}
pointSize={0}
pointColor={{ from: "color", modifiers: [] }}
pointBorderWidth={2}
pointBorderColor={{ from: "serieColor" }}
pointLabelYOffset={-12}
useMesh={true}
legends={[
{
anchor: "bottom-right",
direction: "column",
justify: false,
translateX: 100,
translateY: 0,
itemsSpacing: 0,
itemDirection: "left-to-right",
itemWidth: 80,
itemHeight: 20,
itemOpacity: 0.75,
symbolSize: 12,
symbolShape: "circle",
symbolBorderColor: "rgba(0, 0, 0, .5)",
effects: [
{
on: "hover",
style: {
itemBackground: "rgba(0, 0, 0, .03)",
itemOpacity: 1
}
}
]
}
]}
/>
</div>
);
}
const data1 = [
{
id: "a",
data: [
{ x: "0", y: 0 },
{ x: "121", y: 121 },
{ x: "122", y: null },
{ x: "123", y: null },
{ x: "124", y: null },
{ x: "125", y: null },
{ x: "126", y: null },
{ x: "127", y: null },
{ x: "128", y: null },
{ x: "129", y: null },
{ x: "130", y: null },
{ x: "131", y: null },
{ x: "132", y: null },
{ x: "133", y: null },
{ x: "134", y: null },
{ x: "135", y: null },
{ x: "136", y: null },
{ x: "137", y: null },
{ x: "138", y: 138 },
{ x: "139", y: 139 },
{ x: "140", y: 140 },
{ x: "141", y: null },
{ x: "142", y: 142 },
{ x: "143", y: null },
{ x: "144", y: 144 },
{ x: "145", y: 145 },
{ x: "146", y: 146 },
{ x: "147", y: 147 },
{ x: "148", y: 148 },
{ x: "149", y: 149 },
{ x: "150", y: 150 },
{ x: "151", y: 151 },
{ x: "152", y: 152 },
{ x: "153", y: 153 },
{ x: "154", y: 154 },
{ x: "155", y: 155 },
{ x: "156", y: 156 },
{ x: "157", y: 157 },
{ x: "158", y: 158 },
{ x: "159", y: 159 },
{ x: "160", y: 160 },
{ x: "161", y: 161 },
{ x: "162", y: 162 },
{ x: "163", y: 163 },
{ x: "164", y: 164 },
{ x: "165", y: 165 },
{ x: "166", y: 166 },
{ x: "167", y: 167 },
{ x: "168", y: 168 },
{ x: "169", y: 169 },
{ x: "170", y: 170 },
{ x: "171", y: 171 },
{ x: "172", y: 172 },
{ x: "173", y: 173 },
{ x: "174", y: 174 },
{ x: "175", y: 175 },
{ x: "176", y: 176 },
{ x: "177", y: 177 },
{ x: "178", y: 178 },
{ x: "179", y: 179 },
{ x: "180", y: 180 },
{ x: "181", y: 181 },
{ x: "182", y: 182 },
{ x: "183", y: 183 },
{ x: "184", y: 184 },
{ x: "185", y: 185 },
{ x: "186", y: 186 },
{ x: "187", y: 187 },
{ x: "188", y: 188 },
{ x: "189", y: 189 },
{ x: "190", y: 190 },
{ x: "191", y: 191 },
{ x: "192", y: 192 },
{ x: "193", y: 193 },
{ x: "194", y: 194 },
{ x: "195", y: 195 },
{ x: "196", y: 196 },
{ x: "197", y: 197 },
{ x: "198", y: 198 },
{ x: "199", y: 199 },
{ x: "200", y: 200 },
{ x: "201", y: 201 },
{ x: "202", y: 202 },
{ x: "203", y: 203 },
{ x: "204", y: 204 },
{ x: "205", y: 205 },
{ x: "206", y: 206 },
{ x: "207", y: 207 },
{ x: "208", y: 208 },
{ x: "209", y: 209 },
{ x: "210", y: 210 },
{ x: "211", y: 211 },
{ x: "212", y: 212 },
{ x: "213", y: 213 },
{ x: "214", y: 214 },
{ x: "215", y: 215 },
{ x: "216", y: 216 },
{ x: "217", y: 217 },
{ x: "218", y: 218 },
{ x: "219", y: 219 },
{ x: "220", y: 220 },
{ x: "221", y: 221 },
{ x: "222", y: 222 },
{ x: "223", y: 223 },
{ x: "224", y: 224 },
{ x: "225", y: 225 },
{ x: "226", y: 226 },
{ x: "227", y: 227 },
{ x: "228", y: 228 },
{ x: "229", y: 229 },
{ x: "230", y: 230 },
{ x: "231", y: 231 },
{ x: "232", y: 232 },
{ x: "233", y: 233 },
{ x: "234", y: 234 },
{ x: "235", y: 235 },
{ x: "236", y: 236 },
{ x: "237", y: 237 },
{ x: "238", y: 238 },
{ x: "239", y: 239 },
{ x: "240", y: 240 },
{ x: "241", y: 241 },
{ x: "242", y: 242 },
{ x: "243", y: 243 },
{ x: "244", y: 244 },
{ x: "245", y: 245 },
{ x: "246", y: 246 },
{ x: "247", y: 247 },
{ x: "248", y: 248 },
{ x: "249", y: 249 },
{ x: "250", y: 250 },
{ x: "251", y: 251 },
{ x: "252", y: 252 },
{ x: "253", y: 253 },
{ x: "254", y: 254 },
{ x: "255", y: 255 },
{ x: "256", y: 256 },
{ x: "257", y: 257 },
{ x: "258", y: 258 },
{ x: "259", y: 259 },
{ x: "260", y: 260 },
{ x: "261", y: 261 },
{ x: "262", y: 262 },
{ x: "263", y: 263 },
{ x: "264", y: 264 },
{ x: "265", y: 265 },
{ x: "266", y: 266 },
{ x: "267", y: 267 },
{ x: "268", y: 268 },
{ x: "269", y: 269 },
{ x: "270", y: 270 },
{ x: "271", y: 271 },
{ x: "272", y: 272 },
{ x: "273", y: 273 },
{ x: "274", y: 274 },
{ x: "275", y: 275 },
{ x: "276", y: 276 },
{ x: "277", y: 277 },
{ x: "278", y: 278 },
{ x: "279", y: 279 },
{ x: "280", y: 280 },
{ x: "281", y: 281 },
{ x: "282", y: 282 },
{ x: "283", y: 283 },
{ x: "284", y: 284 },
{ x: "285", y: 285 },
{ x: "286", y: 286 },
{ x: "287", y: 287 },
{ x: "288", y: 288 },
{ x: "289", y: 289 },
{ x: "290", y: 290 },
{ x: "291", y: 291 },
{ x: "292", y: 292 },
{ x: "293", y: 293 },
{ x: "294", y: 294 },
{ x: "295", y: 295 },
{ x: "296", y: 296 },
{ x: "297", y: 297 },
{ x: "298", y: 298 },
{ x: "299", y: 299 },
{ x: "300", y: 300 },
{ x: "301", y: 301 },
{ x: "302", y: 302 },
{ x: "303", y: 303 },
{ x: "304", y: 304 },
{ x: "305", y: 305 },
{ x: "306", y: 306 },
{ x: "307", y: 307 },
{ x: "308", y: 308 },
{ x: "309", y: 309 },
{ x: "310", y: 310 },
{ x: "311", y: 311 },
{ x: "312", y: 312 },
{ x: "313", y: 313 },
{ x: "314", y: 314 },
{ x: "315", y: 315 },
{ x: "316", y: 316 },
{ x: "317", y: 317 },
{ x: "318", y: 318 },
{ x: "319", y: 319 },
{ x: "320", y: 320 },
{ x: "321", y: 321 },
{ x: "322", y: 322 },
{ x: "323", y: 323 },
{ x: "324", y: 324 },
{ x: "325", y: 325 },
{ x: "326", y: 326 },
{ x: "327", y: 327 },
{ x: "328", y: 328 },
{ x: "329", y: 329 },
{ x: "330", y: 330 },
{ x: "331", y: 331 },
{ x: "332", y: 332 },
{ x: "333", y: 333 },
{ x: "334", y: 334 },
{ x: "335", y: 335 },
{ x: "336", y: 336 },
{ x: "337", y: 337 },
{ x: "338", y: 338 },
{ x: "339", y: 339 },
{ x: "340", y: 340 },
{ x: "341", y: 341 },
{ x: "342", y: 342 },
{ x: "343", y: 343 },
{ x: "344", y: 344 },
{ x: "345", y: 345 },
{ x: "346", y: 346 },
{ x: "347", y: 347 },
{ x: "348", y: 348 },
{ x: "349", y: 349 },
{ x: "350", y: 350 },
{ x: "351", y: 351 },
{ x: "352", y: 352 },
{ x: "353", y: 353 },
{ x: "354", y: 354 },
{ x: "355", y: 355 },
{ x: "356", y: 356 },
{ x: "357", y: 357 },
{ x: "358", y: 358 },
{ x: "359", y: null },
{ x: "360", y: null },
{ x: "361", y: 361 },
{ x: "362", y: 362 },
{ x: "363", y: 363 },
{ x: "364", y: 364 },
{ x: "365", y: 365 },
{ x: "366", y: 366 },
{ x: "367", y: 367 },
{ x: "368", y: 368 },
{ x: "369", y: 369 },
{ x: "370", y: 370 },
{ x: "371", y: 371 },
{ x: "372", y: 372 },
{ x: "373", y: 373 },
{ x: "374", y: 374 },
{ x: "375", y: 375 },
{ x: "376", y: 376 },
{ x: "377", y: 377 },
{ x: "378", y: 378 },
{ x: "379", y: 379 },
{ x: "380", y: 380 },
{ x: "381", y: 381 },
{ x: "382", y: 382 },
{ x: "383", y: 383 },
{ x: "384", y: 384 },
{ x: "385", y: 385 },
{ x: "386", y: 386 },
{ x: "387", y: 387 },
{ x: "388", y: 388 },
{ x: "389", y: 389 },
{ x: "390", y: 390 },
{ x: "391", y: 391 },
{ x: "392", y: 392 },
{ x: "393", y: 393 },
{ x: "394", y: 394 },
{ x: "395", y: 395 },
{ x: "396", y: 396 },
{ x: "397", y: 397 },
{ x: "398", y: 398 },
{ x: "399", y: 399 },
{ x: "400", y: 400 },
{ x: "401", y: 401 },
{ x: "402", y: 402 },
{ x: "403", y: null },
{ x: "404", y: 404 },
{ x: "405", y: 405 },
{ x: "406", y: 406 },
{ x: "407", y: 407 },
{ x: "408", y: 408 },
{ x: "409", y: 409 },
{ x: "410", y: null },
{ x: "411", y: 411 },
{ x: "412", y: 412 },
{ x: "413", y: 413 },
{ x: "414", y: 414 },
{ x: "415", y: 415 },
{ x: "416", y: 416 },
{ x: "417", y: null },
{ x: "418", y: 418 },
{ x: "419", y: 419 },
{ x: "420", y: 420 },
{ x: "421", y: 421 },
{ x: "422", y: 422 },
{ x: "423", y: 423 },
{ x: "424", y: 424 },
{ x: "425", y: 425 },
{ x: "426", y: 426 },
{ x: "427", y: 427 },
{ x: "428", y: 428 },
{ x: "429", y: 429 },
{ x: "430", y: 430 },
{ x: "431", y: null },
{ x: "432", y: 432 },
{ x: "433", y: 433 },
{ x: "434", y: 434 },
{ x: "435", y: 435 },
{ x: "436", y: 436 },
{ x: "437", y: 437 },
{ x: "438", y: null },
{ x: "439", y: 439 },
{ x: "440", y: 440 },
{ x: "441", y: 441 },
{ x: "442", y: 442 },
{ x: "443", y: 443 },
{ x: "444", y: 444 },
{ x: "445", y: null },
{ x: "446", y: 446 },
{ x: "447", y: 447 },
{ x: "448", y: 448 },
{ x: "449", y: 449 },
{ x: "450", y: 450 },
{ x: "451", y: 451 },
{ x: "452", y: null },
{ x: "453", y: 453 },
{ x: "454", y: 454 },
{ x: "455", y: 455 },
{ x: "456", y: 456 },
{ x: "457", y: null },
{ x: "458", y: 458 },
{ x: "459", y: null },
{ x: "460", y: 460 },
{ x: "461", y: 461 },
{ x: "462", y: 462 },
{ x: "463", y: 463 },
{ x: "464", y: 464 },
{ x: "465", y: 465 },
{ x: "466", y: null },
{ x: "467", y: 467 },
{ x: "468", y: 468 },
{ x: "469", y: 469 },
{ x: "470", y: 470 },
{ x: "471", y: 471 },
{ x: "472", y: 472 },
{ x: "473", y: 473 },
{ x: "474", y: 474 },
{ x: "475", y: 475 },
{ x: "476", y: 476 },
{ x: "477", y: 477 },
{ x: "478", y: 478 },
{ x: "479", y: 479 },
{ x: "480", y: null },
{ x: "481", y: 481 },
{ x: "482", y: 482 },
{ x: "483", y: 483 },
{ x: "484", y: 484 },
{ x: "485", y: 485 },
{ x: "486", y: 486 },
{ x: "487", y: null },
{ x: "488", y: 488 },
{ x: "489", y: 489 },
{ x: "490", y: 490 },
{ x: "491", y: 491 },
{ x: "492", y: 492 },
{ x: "493", y: 493 },
{ x: "494", y: null },
{ x: "495", y: 495 },
{ x: "496", y: 496 },
{ x: "497", y: 497 },
{ x: "498", y: 498 },
{ x: "499", y: 499 },
{ x: "500", y: 500 },
{ x: "501", y: null },
{ x: "502", y: 502 },
{ x: "503", y: 503 },
{ x: "504", y: 504 },
{ x: "505", y: 505 },
{ x: "506", y: 506 },
{ x: "507", y: 507 },
{ x: "508", y: null },
{ x: "509", y: 509 },
{ x: "510", y: 510 },
{ x: "511", y: 511 },
{ x: "512", y: 512 },
{ x: "513", y: 513 },
{ x: "514", y: 514 },
{ x: "515", y: null },
{ x: "516", y: 516 },
{ x: "517", y: 517 },
{ x: "518", y: 518 },
{ x: "519", y: 519 },
{ x: "520", y: 520 },
{ x: "521", y: 521 },
{ x: "522", y: null },
{ x: "523", y: 523 },
{ x: "524", y: 524 },
{ x: "525", y: 525 },
{ x: "526", y: 526 },
{ x: "527", y: 527 },
{ x: "528", y: 528 },
{ x: "529", y: null },
{ x: "530", y: 530 },
{ x: "531", y: 531 },
{ x: "532", y: 532 },
{ x: "533", y: 533 },
{ x: "534", y: 534 },
{ x: "535", y: 535 },
{ x: "536", y: null },
{ x: "537", y: 537 },
{ x: "538", y: 538 },
{ x: "539", y: 539 },
{ x: "540", y: 540 },
{ x: "541", y: 541 },
{ x: "542", y: 542 },
{ x: "543", y: null },
{ x: "544", y: 544 },
{ x: "545", y: 545 },
{ x: "546", y: 546 },
{ x: "547", y: 547 },
{ x: "548", y: 548 },
{ x: "549", y: 549 },
{ x: "550", y: null },
{ x: "551", y: 551 },
{ x: "552", y: 552 },
{ x: "553", y: 553 },
{ x: "554", y: 554 },
{ x: "555", y: 555 },
{ x: "556", y: 556 },
{ x: "557", y: null },
{ x: "558", y: 558 },
{ x: "559", y: 559 },
{ x: "560", y: 560 },
{ x: "561", y: 561 },
{ x: "562", y: 562 },
{ x: "563", y: 563 },
{ x: "564", y: null },
{ x: "565", y: 565 },
{ x: "566", y: 566 },
{ x: "567", y: 567 },
{ x: "568", y: 568 },
{ x: "569", y: 569 },
{ x: "570", y: 570 },
{ x: "571", y: null },
{ x: "572", y: 572 },
{ x: "573", y: 573 },
{ x: "574", y: 574 },
{ x: "575", y: 575 },
{ x: "576", y: 576 },
{ x: "577", y: 577 },
{ x: "578", y: 578 },
{ x: "579", y: 579 },
{ x: "580", y: 580 },
{ x: "581", y: 581 },
{ x: "582", y: 582 },
{ x: "583", y: 583 },
{ x: "584", y: 584 },
{ x: "585", y: null },
{ x: "586", y: 586 },
{ x: "587", y: 587 },
{ x: "588", y: 588 },
{ x: "589", y: 589 },
{ x: "590", y: 590 },
{ x: "591", y: 591 },
{ x: "592", y: null },
{ x: "593", y: 593 },
{ x: "594", y: 594 },
{ x: "595", y: 595 },
{ x: "596", y: 596 },
{ x: "597", y: 597 },
{ x: "598", y: 598 },
{ x: "599", y: null },
{ x: "600", y: 600 },
{ x: "601", y: 601 },
{ x: "602", y: 602 },
{ x: "603", y: 603 },
{ x: "604", y: 604 },
{ x: "605", y: 605 },
{ x: "606", y: null },
{ x: "607", y: 607 },
{ x: "608", y: 608 },
{ x: "609", y: 609 },
{ x: "610", y: 610 },
{ x: "611", y: 611 },
{ x: "612", y: 612 },
{ x: "613", y: null },
{ x: "614", y: 614 },
{ x: "615", y: 615 },
{ x: "616", y: 616 },
{ x: "617", y: 617 },
{ x: "618", y: 618 },
{ x: "619", y: 619 },
{ x: "620", y: null },
{ x: "621", y: 621 },
{ x: "622", y: 622 },
{ x: "623", y: 623 },
{ x: "624", y: 624 },
{ x: "625", y: 625 },
{ x: "626", y: 626 },
{ x: "627", y: null },
{ x: "628", y: 628 },
{ x: "629", y: 629 },
{ x: "630", y: 630 },
{ x: "631", y: 631 },
{ x: "632", y: 632 },
{ x: "633", y: 633 },
{ x: "634", y: null },
{ x: "635", y: 635 },
{ x: "636", y: 636 },
{ x: "637", y: 637 },
{ x: "638", y: 638 },
{ x: "639", y: 639 },
{ x: "640", y: 640 },
{ x: "641", y: null },
{ x: "642", y: 642 },
{ x: "643", y: 643 },
{ x: "644", y: 644 },
{ x: "645", y: 645 },
{ x: "646", y: 646 },
{ x: "647", y: 647 },
{ x: "648", y: 648 },
{ x: "649", y: 649 },
{ x: "650", y: 650 },
{ x: "651", y: 651 },
{ x: "652", y: 652 },
{ x: "653", y: 653 },
{ x: "654", y: 654 },
{ x: "655", y: null },
{ x: "656", y: 656 },
{ x: "657", y: 657 },
{ x: "658", y: 658 },
{ x: "659", y: 659 },
{ x: "660", y: 660 },
{ x: "661", y: 661 },
{ x: "662", y: null },
{ x: "663", y: 663 },
{ x: "664", y: 664 },
{ x: "665", y: 665 },
{ x: "666", y: 666 },
{ x: "667", y: 667 },
{ x: "668", y: 668 },
{ x: "669", y: null },
{ x: "670", y: 670 },
{ x: "671", y: 671 },
{ x: "672", y: 672 },
{ x: "673", y: 673 },
{ x: "674", y: 674 },
{ x: "675", y: 675 },
{ x: "676", y: null },
{ x: "677", y: 677 },
{ x: "678", y: 678 },
{ x: "679", y: 679 },
{ x: "680", y: 680 },
{ x: "681", y: 681 },
{ x: "682", y: 682 },
{ x: "683", y: null },
{ x: "684", y: 684 },
{ x: "685", y: 685 },
{ x: "686", y: 686 },
{ x: "687", y: 687 },
{ x: "688", y: 688 },
{ x: "689", y: 689 },
{ x: "690", y: null },
{ x: "691", y: 691 },
{ x: "692", y: 692 },
{ x: "693", y: 693 },
{ x: "694", y: 694 },
{ x: "695", y: 695 },
{ x: "696", y: 696 },
{ x: "697", y: null },
{ x: "698", y: 698 },
{ x: "699", y: 699 },
{ x: "700", y: 700 },
{ x: "701", y: 701 },
{ x: "702", y: 702 },
{ x: "703", y: 703 },
{ x: "704", y: null },
{ x: "705", y: 705 },
{ x: "706", y: 706 },
{ x: "707", y: 707 },
{ x: "708", y: 708 },
{ x: "709", y: 709 },
{ x: "710", y: 710 },
{ x: "711", y: 711 },
{ x: "712", y: 712 },
{ x: "713", y: 713 },
{ x: "714", y: 714 },
{ x: "715", y: 715 },
{ x: "716", y: 716 },
{ x: "717", y: 717 },
{ x: "718", y: null },
{ x: "719", y: 719 },
{ x: "720", y: 720 },
{ x: "721", y: 721 },
{ x: "722", y: 722 },
{ x: "723", y: 723 },
{ x: "724", y: null },
{ x: "725", y: null },
{ x: "726", y: 726 },
{ x: "727", y: 727 },
{ x: "728", y: 728 },
{ x: "729", y: 729 },
{ x: "730", y: 730 },
{ x: "731", y: 731 },
{ x: "732", y: null },
{ x: "733", y: 733 },
{ x: "734", y: 734 },
{ x: "735", y: 735 },
{ x: "736", y: 736 },
{ x: "737", y: 737 },
{ x: "738", y: 738 },
{ x: "739", y: null },
{ x: "740", y: 740 },
{ x: "741", y: 741 },
{ x: "742", y: 742 },
{ x: "743", y: 743 },
{ x: "744", y: 744 },
{ x: "745", y: 745 },
{ x: "746", y: null },
{ x: "747", y: 747 },
{ x: "748", y: 748 },
{ x: "749", y: null },
{ x: "750", y: null },
{ x: "751", y: null },
{ x: "752", y: null },
{ x: "753", y: null },
{ x: "754", y: null },
{ x: "755", y: null },
{ x: "756", y: null },
{ x: "757", y: null },
{ x: "758", y: null },
{ x: "759", y: null },
{ x: "760", y: null },
{ x: "761", y: null },
{ x: "762", y: null },
{ x: "763", y: null },
{ x: "764", y: null },
{ x: "765", y: null },
{ x: "766", y: null },
{ x: "767", y: null },
{ x: "768", y: null },
{ x: "769", y: null },
{ x: "770", y: null },
{ x: "771", y: null },
{ x: "772", y: null },
{ x: "773", y: null },
{ x: "774", y: null },
{ x: "775", y: null },
{ x: "776", y: null },
{ x: "777", y: null },
{ x: "778", y: null },
{ x: "779", y: null },
{ x: "780", y: null },
{ x: "781", y: null },
{ x: "782", y: null },
{ x: "783", y: null },
{ x: "784", y: null },
{ x: "785", y: null },
{ x: "786", y: null },
{ x: "787", y: null },
{ x: "788", y: null },
{ x: "789", y: null },
{ x: "790", y: null },
{ x: "791", y: null },
{ x: "792", y: null },
{ x: "793", y: null },
{ x: "794", y: null },
{ x: "795", y: null },
{ x: "796", y: null },
{ x: "797", y: null },
{ x: "798", y: null },
{ x: "799", y: null },
{ x: "800", y: null },
{ x: "801", y: null },
{ x: "802", y: null },
{ x: "803", y: null },
{ x: "804", y: null },
{ x: "805", y: null },
{ x: "806", y: null },
{ x: "807", y: null },
{ x: "808", y: null },
{ x: "809", y: null },
{ x: "810", y: null },
{ x: "811", y: null },
{ x: "812", y: null },
{ x: "813", y: null },
{ x: "814", y: null },
{ x: "815", y: null },
{ x: "816", y: null },
{ x: "817", y: null },
{ x: "818", y: null },
{ x: "819", y: null },
{ x: "820", y: null },
{ x: "821", y: null },
{ x: "822", y: null },
{ x: "823", y: null },
{ x: "824", y: null },
{ x: "825", y: null },
{ x: "826", y: null },
{ x: "827", y: null },
{ x: "828", y: null },
{ x: "829", y: null },
{ x: "830", y: null },
{ x: "831", y: null },
{ x: "832", y: null },
{ x: "833", y: null },
{ x: "834", y: null },
{ x: "835", y: null },
{ x: "836", y: null },
{ x: "837", y: null },
{ x: "838", y: null },
{ x: "839", y: null },
{ x: "840", y: null },
{ x: "841", y: null },
{ x: "842", y: null },
{ x: "843", y: null },
{ x: "844", y: null },
{ x: "845", y: null },
{ x: "846", y: null },
{ x: "847", y: null },
{ x: "848", y: null },
{ x: "849", y: null },
{ x: "850", y: null },
{ x: "851", y: null },
{ x: "852", y: null },
{ x: "853", y: null },
{ x: "854", y: null },
{ x: "855", y: null },
{ x: "856", y: null },
{ x: "857", y: null },
{ x: "858", y: null },
{ x: "859", y: null },
{ x: "860", y: null },
{ x: "861", y: null },
{ x: "862", y: null },
{ x: "863", y: null },
{ x: "864", y: null },
{ x: "865", y: null },
{ x: "866", y: null },
{ x: "867", y: null },
{ x: "868", y: null },
{ x: "869", y: null },
{ x: "870", y: null },
{ x: "871", y: null },
{ x: "872", y: null },
{ x: "873", y: null },
{ x: "874", y: null },
{ x: "875", y: null },
{ x: "876", y: null },
{ x: "877", y: null },
{ x: "878", y: null },
{ x: "879", y: null },
{ x: "880", y: null },
{ x: "881", y: null },
{ x: "882", y: null },
{ x: "883", y: null },
{ x: "884", y: null },
{ x: "885", y: null },
{ x: "886", y: null },
{ x: "887", y: null },
{ x: "888", y: null },
{ x: "889", y: null },
{ x: "890", y: null },
{ x: "891", y: null },
{ x: "892", y: null },
{ x: "893", y: null },
{ x: "894", y: null },
{ x: "895", y: null },
{ x: "896", y: null },
{ x: "897", y: null },
{ x: "898", y: null },
{ x: "899", y: null },
{ x: "900", y: null },
{ x: "901", y: null },
{ x: "902", y: null },
{ x: "903", y: null },
{ x: "904", y: null },
{ x: "905", y: null },
{ x: "906", y: null },
{ x: "907", y: null },
{ x: "908", y: null },
{ x: "909", y: null },
{ x: "910", y: null },
{ x: "911", y: null }
]
},
{
id: "b",
data: [
{ x: "0", y: null },
{ x: "121", y: 121 },
{ x: "122", y: 122 },
{ x: "123", y: 123 },
{ x: "124", y: 124 },
{ x: "125", y: 125 },
{ x: "126", y: 126 },
{ x: "127", y: 127 },
{ x: "128", y: 128 },
{ x: "129", y: 129 },
{ x: "130", y: 130 },
{ x: "131", y: 131 },
{ x: "132", y: 132 },
{ x: "133", y: 133 },
{ x: "134", y: 134 },
{ x: "135", y: 135 },
{ x: "136", y: 136 },
{ x: "137", y: 137 },
{ x: "138", y: 138 },
{ x: "139", y: 139 },
{ x: "140", y: 140 },
{ x: "141", y: 141 },
{ x: "142", y: 142 },
{ x: "143", y: 143 },
{ x: "144", y: 144 },
{ x: "145", y: 145 },
{ x: "146", y: 146 },
{ x: "147", y: 147 },
{ x: "148", y: 148 },
{ x: "149", y: 149 },
{ x: "150", y: 150 },
{ x: "151", y: 151 },
{ x: "152", y: 152 },
{ x: "153", y: 153 },
{ x: "154", y: 154 },
{ x: "155", y: 155 },
{ x: "156", y: 156 },
{ x: "157", y: 157 },
{ x: "158", y: 158 },
{ x: "159", y: 159 },
{ x: "160", y: 160 },
{ x: "161", y: 161 },
{ x: "162", y: 162 },
{ x: "163", y: 163 },
{ x: "164", y: 164 },
{ x: "165", y: 165 },
{ x: "166", y: 166 },
{ x: "167", y: 167 },
{ x: "168", y: 168 },
{ x: "169", y: 169 },
{ x: "170", y: 170 },
{ x: "171", y: 171 },
{ x: "172", y: 172 },
{ x: "173", y: 173 },
{ x: "174", y: 174 },
{ x: "175", y: 175 },
{ x: "176", y: 176 },
{ x: "177", y: 177 },
{ x: "178", y: 178 },
{ x: "179", y: 179 },
{ x: "180", y: 180 },
{ x: "181", y: 181 },
{ x: "182", y: 182 },
{ x: "183", y: 183 },
{ x: "184", y: 184 },
{ x: "185", y: 185 },
{ x: "186", y: 186 },
{ x: "187", y: 187 },
{ x: "188", y: 188 },
{ x: "189", y: 189 },
{ x: "190", y: 190 },
{ x: "191", y: 191 },
{ x: "192", y: 192 },
{ x: "193", y: 193 },
{ x: "194", y: 194 },
{ x: "195", y: 195 },
{ x: "196", y: 196 },
{ x: "197", y: 197 },
{ x: "198", y: 198 },
{ x: "199", y: 199 },
{ x: "200", y: 200 },
{ x: "201", y: 201 },
{ x: "202", y: 202 },
{ x: "203", y: 203 },
{ x: "204", y: 204 },
{ x: "205", y: 205 },
{ x: "206", y: 206 },
{ x: "207", y: 207 },
{ x: "208", y: 208 },
{ x: "209", y: 209 },
{ x: "210", y: 210 },
{ x: "211", y: 211 },
{ x: "212", y: 212 },
{ x: "213", y: 213 },
{ x: "214", y: 214 },
{ x: "215", y: 215 },
{ x: "216", y: 216 },
{ x: "217", y: 217 },
{ x: "218", y: 218 },
{ x: "219", y: 219 },
{ x: "220", y: 220 },
{ x: "221", y: 221 },
{ x: "222", y: 222 },
{ x: "223", y: 223 },
{ x: "224", y: 224 },
{ x: "225", y: 225 },
{ x: "226", y: 226 },
{ x: "227", y: 227 },
{ x: "228", y: 228 },
{ x: "229", y: 229 },
{ x: "230", y: 230 },
{ x: "231", y: 231 },
{ x: "232", y: 232 },
{ x: "233", y: 233 },
{ x: "234", y: 234 },
{ x: "235", y: 235 },
{ x: "236", y: 236 },
{ x: "237", y: 237 },
{ x: "238", y: 238 },
{ x: "239", y: 239 },
{ x: "240", y: 240 },
{ x: "241", y: 241 },
{ x: "242", y: 242 },
{ x: "243", y: 243 },
{ x: "244", y: 244 },
{ x: "245", y: 245 },
{ x: "246", y: 246 },
{ x: "247", y: 247 },
{ x: "248", y: 248 },
{ x: "249", y: 249 },
{ x: "250", y: 250 },
{ x: "251", y: 251 },
{ x: "252", y: 252 },
{ x: "253", y: 253 },
{ x: "254", y: 254 },
{ x: "255", y: 255 },
{ x: "256", y: 256 },
{ x: "257", y: 257 },
{ x: "258", y: 258 },
{ x: "259", y: 259 },
{ x: "260", y: 260 },
{ x: "261", y: 261 },
{ x: "262", y: 262 },
{ x: "263", y: 263 },
{ x: "264", y: 264 },
{ x: "265", y: 265 },
{ x: "266", y: 266 },
{ x: "267", y: 267 },
{ x: "268", y: 268 },
{ x: "269", y: 269 },
{ x: "270", y: 270 },
{ x: "271", y: 271 },
{ x: "272", y: 272 },
{ x: "273", y: 273 },
{ x: "274", y: 274 },
{ x: "275", y: 275 },
{ x: "276", y: 276 },
{ x: "277", y: 277 },
{ x: "278", y: 278 },
{ x: "279", y: 279 },
{ x: "280", y: 280 },
{ x: "281", y: 281 },
{ x: "282", y: 282 },
{ x: "283", y: 283 },
{ x: "284", y: 284 },
{ x: "285", y: 285 },
{ x: "286", y: 286 },
{ x: "287", y: 287 },
{ x: "288", y: 288 },
{ x: "289", y: 289 },
{ x: "290", y: 290 },
{ x: "291", y: 291 },
{ x: "292", y: 292 },
{ x: "293", y: 293 },
{ x: "294", y: 294 },
{ x: "295", y: 295 },
{ x: "296", y: 296 },
{ x: "297", y: 297 },
{ x: "298", y: 298 },
{ x: "299", y: 299 },
{ x: "300", y: 300 },
{ x: "301", y: 301 },
{ x: "302", y: 302 },
{ x: "303", y: 303 },
{ x: "304", y: 304 },
{ x: "305", y: 305 },
{ x: "306", y: 306 },
{ x: "307", y: 307 },
{ x: "308", y: 308 },
{ x: "309", y: 309 },
{ x: "310", y: 310 },
{ x: "311", y: 311 },
{ x: "312", y: 312 },
{ x: "313", y: 313 },
{ x: "314", y: 314 },
{ x: "315", y: 315 },
{ x: "316", y: 316 },
{ x: "317", y: 317 },
{ x: "318", y: 318 },
{ x: "319", y: 319 },
{ x: "320", y: 320 },
{ x: "321", y: 321 },
{ x: "322", y: 322 },
{ x: "323", y: 323 },
{ x: "324", y: 324 },
{ x: "325", y: 325 },
{ x: "326", y: 326 },
{ x: "327", y: 327 },
{ x: "328", y: 328 },
{ x: "329", y: 329 },
{ x: "330", y: 330 },
{ x: "331", y: 331 },
{ x: "332", y: 332 },
{ x: "333", y: 333 },
{ x: "334", y: 334 },
{ x: "335", y: 335 },
{ x: "336", y: 336 },
{ x: "337", y: 337 },
{ x: "338", y: 338 },
{ x: "339", y: 339 },
{ x: "340", y: 340 },
{ x: "341", y: 341 },
{ x: "342", y: 342 },
{ x: "343", y: 343 },
{ x: "344", y: 344 },
{ x: "345", y: 345 },
{ x: "346", y: 346 },
{ x: "347", y: 347 },
{ x: "348", y: 348 },
{ x: "349", y: 349 },
{ x: "350", y: 350 },
{ x: "351", y: 351 },
{ x: "352", y: 352 },
{ x: "353", y: 353 },
{ x: "354", y: 354 },
{ x: "355", y: 355 },
{ x: "356", y: 356 },
{ x: "357", y: 357 },
{ x: "358", y: 358 },
{ x: "359", y: 359 },
{ x: "360", y: 360 },
{ x: "361", y: 361 },
{ x: "362", y: 362 },
{ x: "363", y: 363 },
{ x: "364", y: 364 },
{ x: "365", y: 365 },
{ x: "366", y: 366 },
{ x: "367", y: 367 },
{ x: "368", y: 368 },
{ x: "369", y: 369 },
{ x: "370", y: 370 },
{ x: "371", y: 371 },
{ x: "372", y: 372 },
{ x: "373", y: 373 },
{ x: "374", y: 374 },
{ x: "375", y: 375 },
{ x: "376", y: 376 },
{ x: "377", y: 377 },
{ x: "378", y: 378 },
{ x: "379", y: 379 },
{ x: "380", y: 380 },
{ x: "381", y: 381 },
{ x: "382", y: 382 },
{ x: "383", y: 383 },
{ x: "384", y: 384 },
{ x: "385", y: 385 },
{ x: "386", y: 386 },
{ x: "387", y: 387 },
{ x: "388", y: 388 },
{ x: "389", y: 389 },
{ x: "390", y: 390 },
{ x: "391", y: 391 },
{ x: "392", y: 392 },
{ x: "393", y: 393 },
{ x: "394", y: 394 },
{ x: "395", y: 395 },
{ x: "396", y: 396 },
{ x: "397", y: 397 },
{ x: "398", y: 398 },
{ x: "399", y: 399 },
{ x: "400", y: 400 },
{ x: "401", y: 401 },
{ x: "402", y: 402 },
{ x: "403", y: 403 },
{ x: "404", y: 404 },
{ x: "405", y: 405 },
{ x: "406", y: 406 },
{ x: "407", y: 407 },
{ x: "408", y: 408 },
{ x: "409", y: 409 },
{ x: "410", y: 410 },
{ x: "411", y: 411 },
{ x: "412", y: 412 },
{ x: "413", y: 413 },
{ x: "414", y: 414 },
{ x: "415", y: 415 },
{ x: "416", y: 416 },
{ x: "417", y: 417 },
{ x: "418", y: 418 },
{ x: "419", y: 419 },
{ x: "420", y: 420 },
{ x: "421", y: 421 },
{ x: "422", y: 422 },
{ x: "423", y: 423 },
{ x: "424", y: 424 },
{ x: "425", y: 425 },
{ x: "426", y: 426 },
{ x: "427", y: 427 },
{ x: "428", y: 428 },
{ x: "429", y: 429 },
{ x: "430", y: 430 },
{ x: "431", y: 431 },
{ x: "432", y: 432 },
{ x: "433", y: 433 },
{ x: "434", y: 434 },
{ x: "435", y: 435 },
{ x: "436", y: 436 },
{ x: "437", y: 437 },
{ x: "438", y: 438 },
{ x: "439", y: 439 },
{ x: "440", y: 440 },
{ x: "441", y: 441 },
{ x: "442", y: 442 },
{ x: "443", y: 443 },
{ x: "444", y: 444 },
{ x: "445", y: 445 },
{ x: "446", y: 446 },
{ x: "447", y: 447 },
{ x: "448", y: 448 },
{ x: "449", y: 449 },
{ x: "450", y: 450 },
{ x: "451", y: 451 },
{ x: "452", y: 452 },
{ x: "453", y: 453 },
{ x: "454", y: 454 },
{ x: "455", y: 455 },
{ x: "456", y: 456 },
{ x: "457", y: 457 },
{ x: "458", y: 458 },
{ x: "459", y: 459 },
{ x: "460", y: 460 },
{ x: "461", y: 461 },
{ x: "462", y: 462 },
{ x: "463", y: 463 },
{ x: "464", y: 464 },
{ x: "465", y: 465 },
{ x: "466", y: 466 },
{ x: "467", y: 467 },
{ x: "468", y: 468 },
{ x: "469", y: 469 },
{ x: "470", y: 470 },
{ x: "471", y: 471 },
{ x: "472", y: 472 },
{ x: "473", y: 473 },
{ x: "474", y: 474 },
{ x: "475", y: 475 },
{ x: "476", y: 476 },
{ x: "477", y: 477 },
{ x: "478", y: 478 },
{ x: "479", y: 479 },
{ x: "480", y: 480 },
{ x: "481", y: 481 },
{ x: "482", y: 482 },
{ x: "483", y: 483 },
{ x: "484", y: 484 },
{ x: "485", y: 485 },
{ x: "486", y: 486 },
{ x: "487", y: 487 },
{ x: "488", y: 488 },
{ x: "489", y: 489 },
{ x: "490", y: 490 },
{ x: "491", y: 491 },
{ x: "492", y: 492 },
{ x: "493", y: 493 },
{ x: "494", y: 494 },
{ x: "495", y: 495 },
{ x: "496", y: 496 },
{ x: "497", y: 497 },
{ x: "498", y: 498 },
{ x: "499", y: 499 },
{ x: "500", y: 500 },
{ x: "501", y: 501 },
{ x: "502", y: 502 },
{ x: "503", y: 503 },
{ x: "504", y: 504 },
{ x: "505", y: 505 },
{ x: "506", y: 506 },
{ x: "507", y: 507 },
{ x: "508", y: 508 },
{ x: "509", y: 509 },
{ x: "510", y: 510 },
{ x: "511", y: 511 },
{ x: "512", y: 512 },
{ x: "513", y: 513 },
{ x: "514", y: 514 },
{ x: "515", y: 515 },
{ x: "516", y: 516 },
{ x: "517", y: 517 },
{ x: "518", y: 518 },
{ x: "519", y: 519 },
{ x: "520", y: 520 },
{ x: "521", y: 521 },
{ x: "522", y: 522 },
{ x: "523", y: 523 },
{ x: "524", y: 524 },
{ x: "525", y: 525 },
{ x: "526", y: 526 },
{ x: "527", y: 527 },
{ x: "528", y: 528 },
{ x: "529", y: 529 },
{ x: "530", y: 530 },
{ x: "531", y: 531 },
{ x: "532", y: 532 },
{ x: "533", y: 533 },
{ x: "534", y: 534 },
{ x: "535", y: 535 },
{ x: "536", y: 536 },
{ x: "537", y: 537 },
{ x: "538", y: 538 },
{ x: "539", y: 539 },
{ x: "540", y: 540 },
{ x: "541", y: 541 },
{ x: "542", y: 542 },
{ x: "543", y: 543 },
{ x: "544", y: 544 },
{ x: "545", y: 545 },
{ x: "546", y: 546 },
{ x: "547", y: 547 },
{ x: "548", y: 548 },
{ x: "549", y: 549 },
{ x: "550", y: 550 },
{ x: "551", y: 551 },
{ x: "552", y: 552 },
{ x: "553", y: 553 },
{ x: "554", y: 554 },
{ x: "555", y: 555 },
{ x: "556", y: 556 },
{ x: "557", y: 557 },
{ x: "558", y: 558 },
{ x: "559", y: 559 },
{ x: "560", y: 560 },
{ x: "561", y: 561 },
{ x: "562", y: 562 },
{ x: "563", y: 563 },
{ x: "564", y: 564 },
{ x: "565", y: 565 },
{ x: "566", y: 566 },
{ x: "567", y: 567 },
{ x: "568", y: 568 },
{ x: "569", y: 569 },
{ x: "570", y: 570 },
{ x: "571", y: 571 },
{ x: "572", y: 572 },
{ x: "573", y: 573 },
{ x: "574", y: 574 },
{ x: "575", y: 575 },
{ x: "576", y: 576 },
{ x: "577", y: 577 },
{ x: "578", y: 578 },
{ x: "579", y: 579 },
{ x: "580", y: 580 },
{ x: "581", y: 581 },
{ x: "582", y: 582 },
{ x: "583", y: 583 },
{ x: "584", y: 584 },
{ x: "585", y: 585 },
{ x: "586", y: 586 },
{ x: "587", y: 587 },
{ x: "588", y: 588 },
{ x: "589", y: 589 },
{ x: "590", y: 590 },
{ x: "591", y: 591 },
{ x: "592", y: 592 },
{ x: "593", y: 593 },
{ x: "594", y: 594 },
{ x: "595", y: 595 },
{ x: "596", y: 596 },
{ x: "597", y: 597 },
{ x: "598", y: 598 },
{ x: "599", y: 599 },
{ x: "600", y: 600 },
{ x: "601", y: 601 },
{ x: "602", y: 602 },
{ x: "603", y: 603 },
{ x: "604", y: 604 },
{ x: "605", y: 605 },
{ x: "606", y: 606 },
{ x: "607", y: 607 },
{ x: "608", y: 608 },
{ x: "609", y: 609 },
{ x: "610", y: 610 },
{ x: "611", y: 611 },
{ x: "612", y: 612 },
{ x: "613", y: 613 },
{ x: "614", y: 614 },
{ x: "615", y: 615 },
{ x: "616", y: 616 },
{ x: "617", y: 617 },
{ x: "618", y: 618 },
{ x: "619", y: 619 },
{ x: "620", y: 620 },
{ x: "621", y: 621 },
{ x: "622", y: 622 },
{ x: "623", y: 623 },
{ x: "624", y: 624 },
{ x: "625", y: 625 },
{ x: "626", y: 626 },
{ x: "627", y: 627 },
{ x: "628", y: 628 },
{ x: "629", y: 629 },
{ x: "630", y: 630 },
{ x: "631", y: 631 },
{ x: "632", y: 632 },
{ x: "633", y: 633 },
{ x: "634", y: 634 },
{ x: "635", y: 635 },
{ x: "636", y: 636 },
{ x: "637", y: 637 },
{ x: "638", y: 638 },
{ x: "639", y: 639 },
{ x: "640", y: 640 },
{ x: "641", y: 641 },
{ x: "642", y: 642 },
{ x: "643", y: 643 },
{ x: "644", y: 644 },
{ x: "645", y: 645 },
{ x: "646", y: 646 },
{ x: "647", y: 647 },
{ x: "648", y: 648 },
{ x: "649", y: 649 },
{ x: "650", y: 650 },
{ x: "651", y: 651 },
{ x: "652", y: 652 },
{ x: "653", y: 653 },
{ x: "654", y: 654 },
{ x: "655", y: 655 },
{ x: "656", y: 656 },
{ x: "657", y: 657 },
{ x: "658", y: 658 },
{ x: "659", y: 659 },
{ x: "660", y: 660 },
{ x: "661", y: 661 },
{ x: "662", y: 662 },
{ x: "663", y: 663 },
{ x: "664", y: 664 },
{ x: "665", y: 665 },
{ x: "666", y: 666 },
{ x: "667", y: 667 },
{ x: "668", y: 668 },
{ x: "669", y: 669 },
{ x: "670", y: 670 },
{ x: "671", y: 671 },
{ x: "672", y: 672 },
{ x: "673", y: 673 },
{ x: "674", y: 674 },
{ x: "675", y: 675 },
{ x: "676", y: 676 },
{ x: "677", y: 677 },
{ x: "678", y: 678 },
{ x: "679", y: 679 },
{ x: "680", y: 680 },
{ x: "681", y: 681 },
{ x: "682", y: 682 },
{ x: "683", y: 683 },
{ x: "684", y: 684 },
{ x: "685", y: 685 },
{ x: "686", y: 686 },
{ x: "687", y: 687 },
{ x: "688", y: 688 },
{ x: "689", y: 689 },
{ x: "690", y: 690 },
{ x: "691", y: 691 },
{ x: "692", y: 692 },
{ x: "693", y: 693 },
{ x: "694", y: 694 },
{ x: "695", y: 695 },
{ x: "696", y: 696 },
{ x: "697", y: 697 },
{ x: "698", y: 698 },
{ x: "699", y: 699 },
{ x: "700", y: 700 },
{ x: "701", y: 701 },
{ x: "702", y: 702 },
{ x: "703", y: 703 },
{ x: "704", y: 704 },
{ x: "705", y: 705 },
{ x: "706", y: 706 },
{ x: "707", y: 707 },
{ x: "708", y: 708 },
{ x: "709", y: 709 },
{ x: "710", y: 710 },
{ x: "711", y: 711 },
{ x: "712", y: 712 },
{ x: "713", y: 713 },
{ x: "714", y: 714 },
{ x: "715", y: 715 },
{ x: "716", y: 716 },
{ x: "717", y: 717 },
{ x: "718", y: 718 },
{ x: "719", y: 719 },
{ x: "720", y: 720 },
{ x: "721", y: 721 },
{ x: "722", y: 722 },
{ x: "723", y: 723 },
{ x: "724", y: 724 },
{ x: "725", y: 725 },
{ x: "726", y: 726 },
{ x: "727", y: 727 },
{ x: "728", y: 728 },
{ x: "729", y: 729 },
{ x: "730", y: 730 },
{ x: "731", y: 731 },
{ x: "732", y: 732 },
{ x: "733", y: 733 },
{ x: "734", y: 734 },
{ x: "735", y: 735 },
{ x: "736", y: 736 },
{ x: "737", y: 737 },
{ x: "738", y: 738 },
{ x: "739", y: 739 },
{ x: "740", y: 740 },
{ x: "741", y: 741 },
{ x: "742", y: 742 },
{ x: "743", y: 743 },
{ x: "744", y: 744 },
{ x: "745", y: 745 },
{ x: "746", y: 746 },
{ x: "747", y: 747 },
{ x: "748", y: 748 },
{ x: "749", y: 749 },
{ x: "750", y: 750 },
{ x: "751", y: 751 },
{ x: "752", y: 752 },
{ x: "753", y: 753 },
{ x: "754", y: 754 },
{ x: "755", y: 755 },
{ x: "756", y: 756 },
{ x: "757", y: 757 },
{ x: "758", y: 758 },
{ x: "759", y: 759 },
{ x: "760", y: 760 },
{ x: "761", y: 761 },
{ x: "762", y: 762 },
{ x: "763", y: 763 },
{ x: "764", y: 764 },
{ x: "765", y: 765 },
{ x: "766", y: 766 },
{ x: "767", y: 767 },
{ x: "768", y: 768 },
{ x: "769", y: 769 },
{ x: "770", y: 770 },
{ x: "771", y: 771 },
{ x: "772", y: 772 },
{ x: "773", y: 773 },
{ x: "774", y: 774 },
{ x: "775", y: 775 },
{ x: "776", y: 776 },
{ x: "777", y: 777 },
{ x: "778", y: 778 },
{ x: "779", y: 779 },
{ x: "780", y: 780 },
{ x: "781", y: 781 },
{ x: "782", y: 782 },
{ x: "783", y: 783 },
{ x: "784", y: 784 },
{ x: "785", y: 785 },
{ x: "786", y: 786 },
{ x: "787", y: 787 },
{ x: "788", y: 788 },
{ x: "789", y: 789 },
{ x: "790", y: 790 },
{ x: "791", y: 791 },
{ x: "792", y: 792 },
{ x: "793", y: 793 },
{ x: "794", y: 794 },
{ x: "795", y: 795 },
{ x: "796", y: 796 },
{ x: "797", y: 797 },
{ x: "798", y: 798 },
{ x: "799", y: 799 },
{ x: "800", y: 800 },
{ x: "801", y: 801 },
{ x: "802", y: 802 },
{ x: "803", y: 803 },
{ x: "804", y: 804 },
{ x: "805", y: 805 },
{ x: "806", y: 806 },
{ x: "807", y: 807 },
{ x: "808", y: 808 },
{ x: "809", y: 809 },
{ x: "810", y: 810 },
{ x: "811", y: 811 },
{ x: "812", y: 812 },
{ x: "813", y: 813 },
{ x: "814", y: 814 },
{ x: "815", y: 815 },
{ x: "816", y: 816 },
{ x: "817", y: 817 },
{ x: "818", y: 818 },
{ x: "819", y: 819 },
{ x: "820", y: 820 },
{ x: "821", y: 821 },
{ x: "822", y: 822 },
{ x: "823", y: 823 },
{ x: "824", y: 824 },
{ x: "825", y: 825 },
{ x: "826", y: 826 },
{ x: "827", y: 827 },
{ x: "828", y: 828 },
{ x: "829", y: 829 },
{ x: "830", y: 830 },
{ x: "831", y: 831 },
{ x: "832", y: 832 },
{ x: "833", y: 833 },
{ x: "834", y: 834 },
{ x: "835", y: 835 },
{ x: "836", y: 836 },
{ x: "837", y: 837 },
{ x: "838", y: 838 },
{ x: "839", y: 839 },
{ x: "840", y: 840 },
{ x: "841", y: 841 },
{ x: "842", y: 842 },
{ x: "843", y: 843 },
{ x: "844", y: 844 },
{ x: "845", y: 845 },
{ x: "846", y: 846 },
{ x: "847", y: 847 },
{ x: "848", y: 848 },
{ x: "849", y: 849 },
{ x: "850", y: 850 },
{ x: "851", y: 851 },
{ x: "852", y: 852 },
{ x: "853", y: 853 },
{ x: "854", y: 854 },
{ x: "855", y: 855 },
{ x: "856", y: 856 },
{ x: "857", y: 857 },
{ x: "858", y: 858 },
{ x: "859", y: 859 },
{ x: "860", y: 860 },
{ x: "861", y: 861 },
{ x: "862", y: 862 },
{ x: "863", y: 863 },
{ x: "864", y: 864 },
{ x: "865", y: 865 },
{ x: "866", y: 866 },
{ x: "867", y: 867 },
{ x: "868", y: 868 },
{ x: "869", y: 869 },
{ x: "870", y: 870 },
{ x: "871", y: 871 },
{ x: "872", y: 872 },
{ x: "873", y: 873 },
{ x: "874", y: 874 },
{ x: "875", y: 875 },
{ x: "876", y: 876 },
{ x: "877", y: 877 },
{ x: "878", y: 878 },
{ x: "879", y: 879 },
{ x: "880", y: 880 },
{ x: "881", y: 881 },
{ x: "882", y: 882 },
{ x: "883", y: 883 },
{ x: "884", y: 884 },
{ x: "885", y: 885 },
{ x: "886", y: 886 },
{ x: "887", y: 887 },
{ x: "888", y: 888 },
{ x: "889", y: 889 },
{ x: "890", y: 890 },
{ x: "891", y: 891 },
{ x: "892", y: 892 },
{ x: "893", y: 893 },
{ x: "894", y: 894 },
{ x: "895", y: 895 },
{ x: "896", y: 896 },
{ x: "897", y: 897 },
{ x: "898", y: 898 },
{ x: "899", y: 899 },
{ x: "900", y: 900 },
{ x: "901", y: 901 },
{ x: "902", y: 902 },
{ x: "903", y: 903 },
{ x: "904", y: 904 },
{ x: "905", y: 905 },
{ x: "906", y: 906 },
{ x: "907", y: 907 },
{ x: "908", y: 908 },
{ x: "909", y: 909 },
{ x: "910", y: 910 },
{ x: "911", y: 911 }
]
}
];
const data2 = [
{
id: "a",
data: [
{ x: "366", y: 366 },
{ x: "397", y: 397 },
{ x: "398", y: null },
{ x: "399", y: null },
{ x: "400", y: null },
{ x: "401", y: null },
{ x: "402", y: null },
{ x: "403", y: null },
{ x: "404", y: null },
{ x: "405", y: null },
{ x: "406", y: null },
{ x: "407", y: null },
{ x: "408", y: null },
{ x: "409", y: null },
{ x: "410", y: null },
{ x: "411", y: null },
{ x: "412", y: null },
{ x: "413", y: null },
{ x: "414", y: null },
{ x: "415", y: null },
{ x: "416", y: null },
{ x: "417", y: null },
{ x: "418", y: 418 },
{ x: "419", y: 419 },
{ x: "420", y: 420 },
{ x: "421", y: null },
{ x: "422", y: 422 },
{ x: "423", y: 423 },
{ x: "424", y: 424 },
{ x: "425", y: 425 },
{ x: "426", y: 426 },
{ x: "427", y: 427 },
{ x: "428", y: 428 },
{ x: "429", y: 429 },
{ x: "430", y: 430 },
{ x: "431", y: 431 },
{ x: "432", y: 432 },
{ x: "433", y: 433 },
{ x: "434", y: 434 },
{ x: "435", y: 435 },
{ x: "436", y: 436 },
{ x: "437", y: 437 },
{ x: "438", y: 438 },
{ x: "439", y: 439 },
{ x: "440", y: 440 },
{ x: "441", y: 441 },
{ x: "442", y: 442 },
{ x: "443", y: 443 },
{ x: "444", y: 444 },
{ x: "445", y: 445 },
{ x: "446", y: 446 },
{ x: "447", y: 447 },
{ x: "448", y: 448 },
{ x: "449", y: 449 },
{ x: "450", y: 450 },
{ x: "451", y: 451 },
{ x: "452", y: 452 },
{ x: "453", y: 453 },
{ x: "454", y: 454 },
{ x: "455", y: 455 },
{ x: "456", y: 456 },
{ x: "457", y: 457 },
{ x: "458", y: 458 },
{ x: "459", y: 459 },
{ x: "460", y: 460 },
{ x: "461", y: 461 },
{ x: "462", y: 462 },
{ x: "463", y: 463 },
{ x: "464", y: 464 },
{ x: "465", y: 465 },
{ x: "466", y: 466 },
{ x: "467", y: 467 },
{ x: "468", y: 468 },
{ x: "469", y: 469 },
{ x: "470", y: 470 },
{ x: "471", y: 471 },
{ x: "472", y: 472 },
{ x: "473", y: 473 },
{ x: "474", y: 474 },
{ x: "475", y: 475 },
{ x: "476", y: 476 },
{ x: "477", y: 477 },
{ x: "478", y: 478 },
{ x: "479", y: 479 },
{ x: "480", y: 480 },
{ x: "481", y: 481 },
{ x: "482", y: 482 },
{ x: "483", y: 483 },
{ x: "484", y: 484 },
{ x: "485", y: 485 },
{ x: "486", y: 486 },
{ x: "487", y: 487 },
{ x: "488", y: 488 },
{ x: "489", y: 489 },
{ x: "490", y: 490 },
{ x: "491", y: 491 },
{ x: "492", y: 492 },
{ x: "493", y: 493 },
{ x: "494", y: 494 },
{ x: "495", y: 495 },
{ x: "496", y: 496 },
{ x: "497", y: 497 },
{ x: "498", y: 498 },
{ x: "499", y: 499 },
{ x: "500", y: 500 },
{ x: "501", y: 501 },
{ x: "502", y: 502 },
{ x: "503", y: 503 },
{ x: "504", y: 504 },
{ x: "505", y: 505 },
{ x: "506", y: 506 },
{ x: "507", y: 507 },
{ x: "508", y: 508 },
{ x: "509", y: 509 },
{ x: "510", y: 510 },
{ x: "511", y: 511 },
{ x: "512", y: 512 },
{ x: "513", y: 513 },
{ x: "514", y: 514 },
{ x: "515", y: 515 },
{ x: "516", y: 516 },
{ x: "517", y: 517 },
{ x: "518", y: 518 },
{ x: "519", y: 519 },
{ x: "520", y: 520 },
{ x: "521", y: 521 },
{ x: "522", y: 522 },
{ x: "523", y: 523 },
{ x: "524", y: 524 },
{ x: "525", y: 525 },
{ x: "526", y: 526 },
{ x: "527", y: 527 },
{ x: "528", y: 528 },
{ x: "529", y: 529 },
{ x: "530", y: 530 },
{ x: "531", y: 531 },
{ x: "532", y: 532 },
{ x: "533", y: 533 },
{ x: "534", y: 534 },
{ x: "535", y: 535 },
{ x: "536", y: 536 },
{ x: "537", y: 537 },
{ x: "538", y: 538 },
{ x: "539", y: 539 },
{ x: "540", y: 540 },
{ x: "541", y: 541 },
{ x: "542", y: 542 },
{ x: "543", y: 543 },
{ x: "544", y: 544 },
{ x: "545", y: 545 },
{ x: "546", y: 546 },
{ x: "547", y: 547 },
{ x: "548", y: 548 },
{ x: "549", y: 549 },
{ x: "550", y: 550 },
{ x: "551", y: 551 },
{ x: "552", y: 552 },
{ x: "553", y: 553 },
{ x: "554", y: 554 },
{ x: "555", y: 555 },
{ x: "556", y: 556 },
{ x: "557", y: 557 },
{ x: "558", y: 558 },
{ x: "559", y: 559 },
{ x: "560", y: 560 },
{ x: "561", y: 561 },
{ x: "562", y: 562 },
{ x: "563", y: 563 },
{ x: "564", y: 564 },
{ x: "565", y: 565 },
{ x: "566", y: 566 },
{ x: "567", y: 567 },
{ x: "568", y: 568 },
{ x: "569", y: 569 },
{ x: "570", y: 570 },
{ x: "571", y: 571 },
{ x: "572", y: 572 },
{ x: "573", y: 573 },
{ x: "574", y: 574 },
{ x: "575", y: 575 },
{ x: "576", y: 576 },
{ x: "577", y: 577 },
{ x: "578", y: 578 },
{ x: "579", y: 579 },
{ x: "580", y: 580 },
{ x: "581", y: 581 },
{ x: "582", y: 582 },
{ x: "583", y: 583 },
{ x: "584", y: 584 },
{ x: "585", y: 585 },
{ x: "586", y: 586 },
{ x: "587", y: 587 },
{ x: "588", y: 588 },
{ x: "589", y: 589 },
{ x: "590", y: 590 },
{ x: "591", y: 591 },
{ x: "592", y: 592 },
{ x: "593", y: 593 },
{ x: "594", y: 594 },
{ x: "595", y: 595 },
{ x: "596", y: 596 },
{ x: "597", y: 597 },
{ x: "598", y: 598 },
{ x: "599", y: 599 },
{ x: "600", y: 600 },
{ x: "601", y: 601 },
{ x: "602", y: 602 },
{ x: "603", y: 603 },
{ x: "604", y: 604 },
{ x: "605", y: 605 },
{ x: "606", y: 606 },
{ x: "607", y: 607 },
{ x: "608", y: 608 },
{ x: "609", y: 609 },
{ x: "610", y: 610 },
{ x: "611", y: 611 },
{ x: "612", y: 612 },
{ x: "613", y: 613 },
{ x: "614", y: 614 },
{ x: "615", y: 615 },
{ x: "616", y: 616 },
{ x: "617", y: 617 },
{ x: "618", y: 618 },
{ x: "619", y: 619 },
{ x: "620", y: 620 },
{ x: "621", y: 621 },
{ x: "622", y: 622 },
{ x: "623", y: 623 },
{ x: "624", y: 624 },
{ x: "625", y: 625 },
{ x: "626", y: 626 },
{ x: "627", y: 627 },
{ x: "628", y: 628 },
{ x: "629", y: 629 },
{ x: "630", y: 630 },
{ x: "631", y: 631 },
{ x: "632", y: 632 },
{ x: "633", y: 633 },
{ x: "634", y: 634 },
{ x: "635", y: 635 },
{ x: "636", y: 636 },
{ x: "637", y: 637 },
{ x: "638", y: 638 },
{ x: "639", y: 639 },
{ x: "640", y: 640 },
{ x: "641", y: 641 },
{ x: "642", y: 642 },
{ x: "643", y: 643 },
{ x: "644", y: 644 },
{ x: "645", y: 645 },
{ x: "646", y: 646 },
{ x: "647", y: 647 },
{ x: "648", y: 648 },
{ x: "649", y: 649 },
{ x: "650", y: 650 },
{ x: "651", y: 651 },
{ x: "652", y: 652 },
{ x: "653", y: 653 },
{ x: "654", y: 654 },
{ x: "655", y: 655 },
{ x: "656", y: 656 },
{ x: "657", y: 657 },
{ x: "658", y: 658 },
{ x: "659", y: 659 },
{ x: "660", y: 660 },
{ x: "661", y: 661 },
{ x: "662", y: 662 },
{ x: "663", y: 663 },
{ x: "664", y: 664 },
{ x: "665", y: 665 },
{ x: "666", y: 666 },
{ x: "667", y: 667 },
{ x: "668", y: 668 },
{ x: "669", y: 669 },
{ x: "670", y: 670 },
{ x: "671", y: 671 },
{ x: "672", y: 672 },
{ x: "673", y: 673 },
{ x: "674", y: 674 },
{ x: "675", y: 675 },
{ x: "676", y: 676 },
{ x: "677", y: 677 },
{ x: "678", y: 678 },
{ x: "679", y: 679 },
{ x: "680", y: 680 },
{ x: "681", y: 681 },
{ x: "682", y: 682 },
{ x: "683", y: 683 },
{ x: "684", y: 684 },
{ x: "685", y: 685 },
{ x: "686", y: 686 },
{ x: "687", y: 687 },
{ x: "688", y: 688 },
{ x: "689", y: 689 },
{ x: "690", y: 690 },
{ x: "691", y: 691 },
{ x: "692", y: 692 },
{ x: "693", y: 693 },
{ x: "694", y: 694 },
{ x: "695", y: 695 },
{ x: "696", y: 696 },
{ x: "697", y: 697 },
{ x: "698", y: 698 },
{ x: "699", y: 699 },
{ x: "700", y: 700 },
{ x: "701", y: 701 },
{ x: "702", y: 702 },
{ x: "703", y: 703 },
{ x: "704", y: 704 },
{ x: "705", y: 705 },
{ x: "706", y: 706 },
{ x: "707", y: 707 },
{ x: "708", y: 708 },
{ x: "709", y: 709 },
{ x: "710", y: 710 },
{ x: "711", y: 711 },
{ x: "712", y: 712 },
{ x: "713", y: 713 },
{ x: "714", y: 714 },
{ x: "715", y: 715 },
{ x: "716", y: 716 },
{ x: "717", y: 717 },
{ x: "718", y: 718 },
{ x: "719", y: 719 },
{ x: "720", y: 720 },
{ x: "721", y: 721 },
{ x: "722", y: 722 },
{ x: "723", y: 723 },
{ x: "724", y: 724 },
{ x: "725", y: 725 },
{ x: "726", y: 726 },
{ x: "727", y: 727 },
{ x: "728", y: 728 },
{ x: "729", y: 729 },
{ x: "730", y: 730 },
{ x: "731", y: 731 },
{ x: "732", y: 732 },
{ x: "733", y: 733 },
{ x: "734", y: 734 },
{ x: "735", y: 735 },
{ x: "736", y: 736 },
{ x: "737", y: 737 },
{ x: "738", y: 738 },
{ x: "739", y: 739 },
{ x: "740", y: 740 },
{ x: "741", y: 741 },
{ x: "742", y: 742 },
{ x: "743", y: 743 },
{ x: "744", y: 744 },
{ x: "745", y: 745 },
{ x: "746", y: 746 },
{ x: "747", y: 747 },
{ x: "748", y: null },
{ x: "749", y: null },
{ x: "750", y: null },
{ x: "751", y: null },
{ x: "752", y: null },
{ x: "753", y: null },
{ x: "754", y: null },
{ x: "755", y: null },
{ x: "756", y: null },
{ x: "757", y: null },
{ x: "758", y: null },
{ x: "759", y: null },
{ x: "760", y: null },
{ x: "761", y: null },
{ x: "762", y: null },
{ x: "763", y: null },
{ x: "764", y: null },
{ x: "765", y: null },
{ x: "766", y: null },
{ x: "767", y: null },
{ x: "768", y: null },
{ x: "769", y: null },
{ x: "770", y: null },
{ x: "771", y: null },
{ x: "772", y: null },
{ x: "773", y: null },
{ x: "774", y: null },
{ x: "775", y: null },
{ x: "776", y: null },
{ x: "777", y: null },
{ x: "778", y: null },
{ x: "779", y: null },
{ x: "780", y: null },
{ x: "781", y: null },
{ x: "782", y: null },
{ x: "783", y: null },
{ x: "784", y: null },
{ x: "785", y: null },
{ x: "786", y: null },
{ x: "787", y: null },
{ x: "788", y: null },
{ x: "789", y: null },
{ x: "790", y: null },
{ x: "791", y: null },
{ x: "792", y: null },
{ x: "793", y: null },
{ x: "794", y: null },
{ x: "795", y: null },
{ x: "796", y: null },
{ x: "797", y: null },
{ x: "798", y: null },
{ x: "799", y: null },
{ x: "800", y: null },
{ x: "801", y: null },
{ x: "802", y: null },
{ x: "803", y: null },
{ x: "804", y: null },
{ x: "805", y: null },
{ x: "806", y: null },
{ x: "807", y: null },
{ x: "808", y: null },
{ x: "809", y: null },
{ x: "810", y: null },
{ x: "811", y: null },
{ x: "812", y: null },
{ x: "813", y: null },
{ x: "814", y: null },
{ x: "815", y: null },
{ x: "816", y: null },
{ x: "817", y: null },
{ x: "818", y: null },
{ x: "819", y: null },
{ x: "820", y: null },
{ x: "821", y: null },
{ x: "822", y: null },
{ x: "823", y: null },
{ x: "824", y: null },
{ x: "825", y: null },
{ x: "826", y: null },
{ x: "827", y: null },
{ x: "828", y: null },
{ x: "829", y: null },
{ x: "830", y: null },
{ x: "831", y: null },
{ x: "832", y: null },
{ x: "833", y: null },
{ x: "834", y: null },
{ x: "835", y: null },
{ x: "836", y: null },
{ x: "837", y: null },
{ x: "838", y: null },
{ x: "839", y: null },
{ x: "840", y: null },
{ x: "841", y: null },
{ x: "842", y: null },
{ x: "843", y: null },
{ x: "844", y: null },
{ x: "845", y: null },
{ x: "846", y: null },
{ x: "847", y: null },
{ x: "848", y: null },
{ x: "849", y: null },
{ x: "850", y: null },
{ x: "851", y: null },
{ x: "852", y: null },
{ x: "853", y: null },
{ x: "854", y: null },
{ x: "855", y: null },
{ x: "856", y: null },
{ x: "857", y: null },
{ x: "858", y: null },
{ x: "859", y: null },
{ x: "860", y: null },
{ x: "861", y: null },
{ x: "862", y: null },
{ x: "863", y: null },
{ x: "864", y: null },
{ x: "865", y: null },
{ x: "866", y: null },
{ x: "867", y: null },
{ x: "868", y: null },
{ x: "869", y: null },
{ x: "870", y: null },
{ x: "871", y: null },
{ x: "872", y: null },
{ x: "873", y: null },
{ x: "874", y: null },
{ x: "875", y: null },
{ x: "876", y: null },
{ x: "877", y: null },
{ x: "878", y: null },
{ x: "879", y: null },
{ x: "880", y: null },
{ x: "881", y: null },
{ x: "882", y: null },
{ x: "883", y: null },
{ x: "884", y: null },
{ x: "885", y: null },
{ x: "886", y: null },
{ x: "887", y: null },
{ x: "888", y: null },
{ x: "889", y: null },
{ x: "890", y: null },
{ x: "891", y: null },
{ x: "892", y: null },
{ x: "893", y: null },
{ x: "894", y: null },
{ x: "895", y: null },
{ x: "896", y: null },
{ x: "897", y: null },
{ x: "898", y: null },
{ x: "899", y: null },
{ x: "900", y: null },
{ x: "901", y: null },
{ x: "902", y: null },
{ x: "903", y: null },
{ x: "904", y: null },
{ x: "905", y: null },
{ x: "906", y: null },
{ x: "907", y: null },
{ x: "908", y: null },
{ x: "909", y: null },
{ x: "910", y: null },
{ x: "911", y: null }
]
},
{
id: "b",
data: [
{ x: "366", y: null },
{ x: "397", y: 397 },
{ x: "398", y: 398 },
{ x: "399", y: 399 },
{ x: "400", y: 400 },
{ x: "401", y: 401 },
{ x: "402", y: 402 },
{ x: "403", y: 403 },
{ x: "404", y: 404 },
{ x: "405", y: 405 },
{ x: "406", y: 406 },
{ x: "407", y: 407 },
{ x: "408", y: 408 },
{ x: "409", y: 409 },
{ x: "410", y: 410 },
{ x: "411", y: 411 },
{ x: "412", y: 412 },
{ x: "413", y: 413 },
{ x: "414", y: 414 },
{ x: "415", y: 415 },
{ x: "416", y: 416 },
{ x: "417", y: 417 },
{ x: "418", y: 418 },
{ x: "419", y: 419 },
{ x: "420", y: 420 },
{ x: "421", y: 421 },
{ x: "422", y: 422 },
{ x: "423", y: 423 },
{ x: "424", y: 424 },
{ x: "425", y: 425 },
{ x: "426", y: 426 },
{ x: "427", y: 427 },
{ x: "428", y: 428 },
{ x: "429", y: 429 },
{ x: "430", y: 430 },
{ x: "431", y: 431 },
{ x: "432", y: 432 },
{ x: "433", y: 433 },
{ x: "434", y: 434 },
{ x: "435", y: 435 },
{ x: "436", y: 436 },
{ x: "437", y: 437 },
{ x: "438", y: 438 },
{ x: "439", y: 439 },
{ x: "440", y: 440 },
{ x: "441", y: 441 },
{ x: "442", y: 442 },
{ x: "443", y: 443 },
{ x: "444", y: 444 },
{ x: "445", y: 445 },
{ x: "446", y: 446 },
{ x: "447", y: 447 },
{ x: "448", y: 448 },
{ x: "449", y: 449 },
{ x: "450", y: 450 },
{ x: "451", y: 451 },
{ x: "452", y: 452 },
{ x: "453", y: 453 },
{ x: "454", y: 454 },
{ x: "455", y: 455 },
{ x: "456", y: 456 },
{ x: "457", y: 457 },
{ x: "458", y: 458 },
{ x: "459", y: 459 },
{ x: "460", y: 460 },
{ x: "461", y: 461 },
{ x: "462", y: 462 },
{ x: "463", y: 463 },
{ x: "464", y: 464 },
{ x: "465", y: 465 },
{ x: "466", y: 466 },
{ x: "467", y: 467 },
{ x: "468", y: 468 },
{ x: "469", y: 469 },
{ x: "470", y: 470 },
{ x: "471", y: 471 },
{ x: "472", y: 472 },
{ x: "473", y: 473 },
{ x: "474", y: 474 },
{ x: "475", y: 475 },
{ x: "476", y: 476 },
{ x: "477", y: 477 },
{ x: "478", y: 478 },
{ x: "479", y: 479 },
{ x: "480", y: 480 },
{ x: "481", y: 481 },
{ x: "482", y: 482 },
{ x: "483", y: 483 },
{ x: "484", y: 484 },
{ x: "485", y: 485 },
{ x: "486", y: 486 },
{ x: "487", y: 487 },
{ x: "488", y: 488 },
{ x: "489", y: 489 },
{ x: "490", y: 490 },
{ x: "491", y: 491 },
{ x: "492", y: 492 },
{ x: "493", y: 493 },
{ x: "494", y: 494 },
{ x: "495", y: 495 },
{ x: "496", y: 496 },
{ x: "497", y: 497 },
{ x: "498", y: 498 },
{ x: "499", y: 499 },
{ x: "500", y: 500 },
{ x: "501", y: 501 },
{ x: "502", y: 502 },
{ x: "503", y: 503 },
{ x: "504", y: 504 },
{ x: "505", y: 505 },
{ x: "506", y: 506 },
{ x: "507", y: 507 },
{ x: "508", y: 508 },
{ x: "509", y: 509 },
{ x: "510", y: 510 },
{ x: "511", y: 511 },
{ x: "512", y: 512 },
{ x: "513", y: 513 },
{ x: "514", y: 514 },
{ x: "515", y: 515 },
{ x: "516", y: 516 },
{ x: "517", y: 517 },
{ x: "518", y: 518 },
{ x: "519", y: 519 },
{ x: "520", y: 520 },
{ x: "521", y: 521 },
{ x: "522", y: 522 },
{ x: "523", y: 523 },
{ x: "524", y: 524 },
{ x: "525", y: 525 },
{ x: "526", y: 526 },
{ x: "527", y: 527 },
{ x: "528", y: 528 },
{ x: "529", y: 529 },
{ x: "530", y: 530 },
{ x: "531", y: 531 },
{ x: "532", y: 532 },
{ x: "533", y: 533 },
{ x: "534", y: 534 },
{ x: "535", y: 535 },
{ x: "536", y: 536 },
{ x: "537", y: 537 },
{ x: "538", y: 538 },
{ x: "539", y: 539 },
{ x: "540", y: 540 },
{ x: "541", y: 541 },
{ x: "542", y: 542 },
{ x: "543", y: 543 },
{ x: "544", y: 544 },
{ x: "545", y: 545 },
{ x: "546", y: 546 },
{ x: "547", y: 547 },
{ x: "548", y: 548 },
{ x: "549", y: 549 },
{ x: "550", y: 550 },
{ x: "551", y: 551 },
{ x: "552", y: 552 },
{ x: "553", y: 553 },
{ x: "554", y: 554 },
{ x: "555", y: 555 },
{ x: "556", y: 556 },
{ x: "557", y: 557 },
{ x: "558", y: 558 },
{ x: "559", y: 559 },
{ x: "560", y: 560 },
{ x: "561", y: 561 },
{ x: "562", y: 562 },
{ x: "563", y: 563 },
{ x: "564", y: 564 },
{ x: "565", y: 565 },
{ x: "566", y: 566 },
{ x: "567", y: 567 },
{ x: "568", y: 568 },
{ x: "569", y: 569 },
{ x: "570", y: 570 },
{ x: "571", y: 571 },
{ x: "572", y: 572 },
{ x: "573", y: 573 },
{ x: "574", y: 574 },
{ x: "575", y: 575 },
{ x: "576", y: 576 },
{ x: "577", y: 577 },
{ x: "578", y: 578 },
{ x: "579", y: 579 },
{ x: "580", y: 580 },
{ x: "581", y: 581 },
{ x: "582", y: 582 },
{ x: "583", y: 583 },
{ x: "584", y: 584 },
{ x: "585", y: 585 },
{ x: "586", y: 586 },
{ x: "587", y: 587 },
{ x: "588", y: 588 },
{ x: "589", y: 589 },
{ x: "590", y: 590 },
{ x: "591", y: 591 },
{ x: "592", y: 592 },
{ x: "593", y: 593 },
{ x: "594", y: 594 },
{ x: "595", y: 595 },
{ x: "596", y: 596 },
{ x: "597", y: 597 },
{ x: "598", y: 598 },
{ x: "599", y: 599 },
{ x: "600", y: 600 },
{ x: "601", y: 601 },
{ x: "602", y: 602 },
{ x: "603", y: 603 },
{ x: "604", y: 604 },
{ x: "605", y: 605 },
{ x: "606", y: 606 },
{ x: "607", y: 607 },
{ x: "608", y: 608 },
{ x: "609", y: 609 },
{ x: "610", y: 610 },
{ x: "611", y: 611 },
{ x: "612", y: 612 },
{ x: "613", y: 613 },
{ x: "614", y: 614 },
{ x: "615", y: 615 },
{ x: "616", y: 616 },
{ x: "617", y: 617 },
{ x: "618", y: 618 },
{ x: "619", y: 619 },
{ x: "620", y: 620 },
{ x: "621", y: 621 },
{ x: "622", y: 622 },
{ x: "623", y: 623 },
{ x: "624", y: 624 },
{ x: "625", y: 625 },
{ x: "626", y: 626 },
{ x: "627", y: 627 },
{ x: "628", y: 628 },
{ x: "629", y: 629 },
{ x: "630", y: 630 },
{ x: "631", y: 631 },
{ x: "632", y: 632 },
{ x: "633", y: 633 },
{ x: "634", y: 634 },
{ x: "635", y: 635 },
{ x: "636", y: 636 },
{ x: "637", y: 637 },
{ x: "638", y: 638 },
{ x: "639", y: 639 },
{ x: "640", y: 640 },
{ x: "641", y: 641 },
{ x: "642", y: 642 },
{ x: "643", y: 643 },
{ x: "644", y: 644 },
{ x: "645", y: 645 },
{ x: "646", y: 646 },
{ x: "647", y: 647 },
{ x: "648", y: 648 },
{ x: "649", y: 649 },
{ x: "650", y: 650 },
{ x: "651", y: 651 },
{ x: "652", y: 652 },
{ x: "653", y: 653 },
{ x: "654", y: 654 },
{ x: "655", y: 655 },
{ x: "656", y: 656 },
{ x: "657", y: 657 },
{ x: "658", y: 658 },
{ x: "659", y: 659 },
{ x: "660", y: 660 },
{ x: "661", y: 661 },
{ x: "662", y: 662 },
{ x: "663", y: 663 },
{ x: "664", y: 664 },
{ x: "665", y: 665 },
{ x: "666", y: 666 },
{ x: "667", y: 667 },
{ x: "668", y: 668 },
{ x: "669", y: 669 },
{ x: "670", y: 670 },
{ x: "671", y: 671 },
{ x: "672", y: 672 },
{ x: "673", y: 673 },
{ x: "674", y: 674 },
{ x: "675", y: 675 },
{ x: "676", y: 676 },
{ x: "677", y: 677 },
{ x: "678", y: 678 },
{ x: "679", y: 679 },
{ x: "680", y: 680 },
{ x: "681", y: 681 },
{ x: "682", y: 682 },
{ x: "683", y: 683 },
{ x: "684", y: 684 },
{ x: "685", y: 685 },
{ x: "686", y: 686 },
{ x: "687", y: 687 },
{ x: "688", y: 688 },
{ x: "689", y: 689 },
{ x: "690", y: 690 },
{ x: "691", y: 691 },
{ x: "692", y: 692 },
{ x: "693", y: 693 },
{ x: "694", y: 694 },
{ x: "695", y: 695 },
{ x: "696", y: 696 },
{ x: "697", y: 697 },
{ x: "698", y: 698 },
{ x: "699", y: 699 },
{ x: "700", y: 700 },
{ x: "701", y: 701 },
{ x: "702", y: 702 },
{ x: "703", y: 703 },
{ x: "704", y: 704 },
{ x: "705", y: 705 },
{ x: "706", y: 706 },
{ x: "707", y: 707 },
{ x: "708", y: 708 },
{ x: "709", y: 709 },
{ x: "710", y: 710 },
{ x: "711", y: 711 },
{ x: "712", y: 712 },
{ x: "713", y: 713 },
{ x: "714", y: 714 },
{ x: "715", y: 715 },
{ x: "716", y: 716 },
{ x: "717", y: 717 },
{ x: "718", y: 718 },
{ x: "719", y: 719 },
{ x: "720", y: 720 },
{ x: "721", y: 721 },
{ x: "722", y: 722 },
{ x: "723", y: 723 },
{ x: "724", y: 724 },
{ x: "725", y: 725 },
{ x: "726", y: 726 },
{ x: "727", y: 727 },
{ x: "728", y: 728 },
{ x: "729", y: 729 },
{ x: "730", y: 730 },
{ x: "731", y: 731 },
{ x: "732", y: 732 },
{ x: "733", y: 733 },
{ x: "734", y: 734 },
{ x: "735", y: 735 },
{ x: "736", y: 736 },
{ x: "737", y: 737 },
{ x: "738", y: 738 },
{ x: "739", y: 739 },
{ x: "740", y: 740 },
{ x: "741", y: 741 },
{ x: "742", y: 742 },
{ x: "743", y: 743 },
{ x: "744", y: 744 },
{ x: "745", y: 745 },
{ x: "746", y: 746 },
{ x: "747", y: 747 },
{ x: "748", y: 748 },
{ x: "749", y: 749 },
{ x: "750", y: 750 },
{ x: "751", y: 751 },
{ x: "752", y: 752 },
{ x: "753", y: 753 },
{ x: "754", y: 754 },
{ x: "755", y: 755 },
{ x: "756", y: 756 },
{ x: "757", y: 757 },
{ x: "758", y: 758 },
{ x: "759", y: 759 },
{ x: "760", y: 760 },
{ x: "761", y: 761 },
{ x: "762", y: 762 },
{ x: "763", y: 763 },
{ x: "764", y: 764 },
{ x: "765", y: 765 },
{ x: "766", y: 766 },
{ x: "767", y: 767 },
{ x: "768", y: 768 },
{ x: "769", y: 769 },
{ x: "770", y: 770 },
{ x: "771", y: 771 },
{ x: "772", y: 772 },
{ x: "773", y: 773 },
{ x: "774", y: 774 },
{ x: "775", y: 775 },
{ x: "776", y: 776 },
{ x: "777", y: 777 },
{ x: "778", y: 778 },
{ x: "779", y: 779 },
{ x: "780", y: 780 },
{ x: "781", y: 781 },
{ x: "782", y: 782 },
{ x: "783", y: 783 },
{ x: "784", y: 784 },
{ x: "785", y: 785 },
{ x: "786", y: 786 },
{ x: "787", y: 787 },
{ x: "788", y: 788 },
{ x: "789", y: 789 },
{ x: "790", y: 790 },
{ x: "791", y: 791 },
{ x: "792", y: 792 },
{ x: "793", y: 793 },
{ x: "794", y: 794 },
{ x: "795", y: 795 },
{ x: "796", y: 796 },
{ x: "797", y: 797 },
{ x: "798", y: 798 },
{ x: "799", y: 799 },
{ x: "800", y: 800 },
{ x: "801", y: 801 },
{ x: "802", y: 802 },
{ x: "803", y: 803 },
{ x: "804", y: 804 },
{ x: "805", y: 805 },
{ x: "806", y: 806 },
{ x: "807", y: 807 },
{ x: "808", y: 808 },
{ x: "809", y: 809 },
{ x: "810", y: 810 },
{ x: "811", y: 811 },
{ x: "812", y: 812 },
{ x: "813", y: 813 },
{ x: "814", y: 814 },
{ x: "815", y: 815 },
{ x: "816", y: 816 },
{ x: "817", y: 817 },
{ x: "818", y: 818 },
{ x: "819", y: 819 },
{ x: "820", y: 820 },
{ x: "821", y: 821 },
{ x: "822", y: 822 },
{ x: "823", y: 823 },
{ x: "824", y: 824 },
{ x: "825", y: 825 },
{ x: "826", y: 826 },
{ x: "827", y: 827 },
{ x: "828", y: 828 },
{ x: "829", y: 829 },
{ x: "830", y: 830 },
{ x: "831", y: 831 },
{ x: "832", y: 832 },
{ x: "833", y: 833 },
{ x: "834", y: 834 },
{ x: "835", y: 835 },
{ x: "836", y: 836 },
{ x: "837", y: 837 },
{ x: "838", y: 838 },
{ x: "839", y: 839 },
{ x: "840", y: 840 },
{ x: "841", y: 841 },
{ x: "842", y: 842 },
{ x: "843", y: 843 },
{ x: "844", y: 844 },
{ x: "845", y: 845 },
{ x: "846", y: 846 },
{ x: "847", y: 847 },
{ x: "848", y: 848 },
{ x: "849", y: 849 },
{ x: "850", y: 850 },
{ x: "851", y: 851 },
{ x: "852", y: 852 },
{ x: "853", y: 853 },
{ x: "854", y: 854 },
{ x: "855", y: 855 },
{ x: "856", y: 856 },
{ x: "857", y: 857 },
{ x: "858", y: 858 },
{ x: "859", y: 859 },
{ x: "860", y: 860 },
{ x: "861", y: 861 },
{ x: "862", y: 862 },
{ x: "863", y: 863 },
{ x: "864", y: 864 },
{ x: "865", y: 865 },
{ x: "866", y: 866 },
{ x: "867", y: 867 },
{ x: "868", y: 868 },
{ x: "869", y: 869 },
{ x: "870", y: 870 },
{ x: "871", y: 871 },
{ x: "872", y: 872 },
{ x: "873", y: 873 },
{ x: "874", y: 874 },
{ x: "875", y: 875 },
{ x: "876", y: 876 },
{ x: "877", y: 877 },
{ x: "878", y: 878 },
{ x: "879", y: 879 },
{ x: "880", y: 880 },
{ x: "881", y: 881 },
{ x: "882", y: 882 },
{ x: "883", y: 883 },
{ x: "884", y: 884 },
{ x: "885", y: 885 },
{ x: "886", y: 886 },
{ x: "887", y: 887 },
{ x: "888", y: 888 },
{ x: "889", y: 889 },
{ x: "890", y: 890 },
{ x: "891", y: 891 },
{ x: "892", y: 892 },
{ x: "893", y: 893 },
{ x: "894", y: 894 },
{ x: "895", y: 895 },
{ x: "896", y: 896 },
{ x: "897", y: 897 },
{ x: "898", y: 898 },
{ x: "899", y: 899 },
{ x: "900", y: 900 },
{ x: "901", y: 901 },
{ x: "902", y: 902 },
{ x: "903", y: 903 },
{ x: "904", y: 904 },
{ x: "905", y: 905 },
{ x: "906", y: 906 },
{ x: "907", y: 907 },
{ x: "908", y: 908 },
{ x: "909", y: 909 },
{ x: "910", y: 910 },
{ x: "911", y: 911 }
]
}
];
In order to repro the lag/crash, you just have to click on “Update”. Then the whole UI will freeze and possibly crash.
Steps to reproduce the behavior:
- Click on “Update” button (in the CodeSandbox or the repro)
- UI will freeze and possibly crash
Expected behavior
No lag. Or more precisely a lag but not as huge as the one we observe during this transition. I’d expect the lag to be of the same order of magnitude as the one of the initial drawing for such large charts.
Screenshots
Desktop (please complete the following information):
- OS: Windows
- Browser: Chrome and Firefox
- Version: 0.79.0 of nivo and head for the browsers
Additional context
While trying to debug it, my debugger stopped on react-spring. Even if I deactivated the animations. I’ll try to send you an even more simplified repro but so far the one attached is the simplest I got.
Issue Analytics
- State:
- Created 2 years ago
- Comments:6 (3 by maintainers)
Top Results From Across the Web
Browser Rendering Optimization - James Priest CV
In the first lesson, you learned how the browser renders pixels from HTML, CSS,and JavaScript. Understanding this process is key to optimizing an...
Read more >How to Fix a Freeze Between React Pages Swap - Qovery
The browser freezes everything while it is striving to render and paint this big new table node element. And once it's done, everything ......
Read more >Browser freeze with series.setData() in 4.0.3 (regression from ...
Hi all,. We are currently experiencing a performance issue with HighCharts 4.0.3 within our application where loading data asynchronously ...
Read more >Slow rendering - Android Developers
If your app suffers from slow UI rendering, then the system is forced to skip frames and the user will perceive stuttering in...
Read more >Web Content Accessibility Guidelines (WCAG) 2.1 - W3C
Web Content Accessibility Guidelines (WCAG) 2.1 covers a wide range of recommendations for making Web content more accessible.
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
I’ll try to spend a bit of time of tracking where it may come from. The issue is quite surprising as initial render is really smooth and transitions seems like to explode in complexity driving the browser crazy. Hope to find something to help 👍
Thanks for the answer. Could you please link me the issue already opened in nivo?
Regarding react-spring, I also found it strange that immediate was causing delayed re-renders while I’d have expected them to be immediate. I investigated in that direction initially but was not able to reach a real solution 😢 I’ll retry with react-spring alone to report them an issue if relevant.