Yagr Labels

by Dat

HTML

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



        <h1>Labels Plugin</h1>
        <div class="grid">
            <div id="chart1" class="container yagr yagr_theme_light" style=""><div class="uplot u-hz"><div class="u-title">By scale, constant</div><div class="u-wrap" style="width: 663px; height: 328px;"><div class="u-under" style="left: 23px; top: 14px; width: 626px; height: 282px;"></div><canvas width="1326" height="656"></canvas><div class="u-over" style="left: 23px; top: 14px; width: 626px; height: 282px;"><div class="u-cursor-x u-off" style="border-right: 1px solid rgb(255, 160, 160); transform: translate(-10px, 0px);"></div><div class="u-cursor-y u-off" style="display: none; transform: translate(0px, -10px);"></div><div class="u-select" style="left: 0px; width: 0px; top: 0px; height: 0px;"></div><div class="yagr-point u-cursor-pt u-off" data-idx="1" style="background: rgb(255, 0, 0); box-shadow: rgba(255, 0, 0, 0.5) 0px 0px 0px 1px; transform: translate(-10px, -10px); border-color: rgb(255, 0, 0); height: 8px; width: 8px; margin-left: -4px; margin-top: -4px;"><span style="background: rgb(255, 0, 0);"></span></div><div class="yagr-label _top" style="top: 213.144px; left: -44px;">(01.01.1970, 1)</div><div class="yagr-label _top" style="top: 58.6774px; left: -11.0526px;">(01.01.1970, 4)</div><div class="yagr-label _top" style="top: 99.3225px; left: 21.8947px;">(01.01.1970, 3)</div><div class="yagr-label _bottom" style="top: 201.122px; left: 54.8421px;">(01.01.1970, 1)</div><div class="yagr-label _top" style="top: 12.6954px; left:...

CSS

.container {
                margin-bottom: 26px;
                height: 350px;
                width: 90%;
            }
            .grid {
                height: 350px;
                display: flex;
                width: 90%;
                flex-direction: row;
                justify-content: space-between;
            }

            .wow {
                background-color: blue !important;
            }

            .whee {
                background-color: blueviolet;
                width: 18px !important;
                height: 18px !important;
                animation: rainbow-bg 1.5s linear;
                animation-iteration-count: infinite;
            }

            @keyframes rainbow-bg {
                100%,
                0% {
                    background-color: rgb(255, 0, 0);
                }
                8% {
                    background-color: rgb(255, 127, 0);
                }
                16% {
                    background-color: rgb(255, 255, 0);
                }
                25% {
                    background-color: rgb(127, 255, 0);
                }
                33% {
                    background-color: rgb(0, 255, 0);
                }
                41% {
                    background-color: rgb(0, 255, 127);
                }
                50% {
                    background-color: rgb(0, 255, 255);
                }
                58% {
                    background-color: rgb(0, 127, 255);
                }
                66% {
                    background-color: rgb(0, 0, 255);
                }
                75% {
                    background-color: rgb(127, 0, 255);
                }
                83% {
                    background-color: rgb(255, 0, 255);
                }
                91% {
                    background-color: rgb(255, 0, 127);
                }
            }

JavaScript

function getRandomColor() {
                var letters = '0123456789ABCDEF';
                var color = '#';
                for (var i = 0; i < 6; i++) {
                    color += letters[Math.floor(Math.random() * 16)];
                }
                return color;
            }
            const y1 = new Yagr(chart1, {
                title: {
                    text: 'By scale, constant',
                },
                timeline: new Array(20).fill().map((_, i) => i * 1000),
                series: [{data: new Array(20).fill().map((_, i) => Math.random() * 6), color: 'red'}],
                axes: {
                    y: {precision: 0},
                },
                scales: {y: {min: 0, max: 6}},
                plugins: [
                    YagrLabelsPlugin({
                        scales: {
                            constant: {y: {}},
                        },
                    }),
                ],
            });

            const y2 = new Yagr(chart2, {
                title: {
                    text: 'By scale, cursor',
                },
                timeline: new Array(20).fill().map((_, i) => i * 1000),
                series: [{data: new Array(20).fill().map((_, i) => Math.random() * 6), color: 'red'}],
                axes: {
                    y: {precision: 0},
                },
                scales: {y: {min: 0, max: 6}},
                plugins: [
                    YagrLabelsPlugin({
                        scales: {
                            cursor: {
                                y: {},
                            },
                        },
                    }),
                ],
            });

            const y3 = new Yagr(chart3, {
                title: {
                    text: 'By series, constant',
                },
                timeline: new Array(20).fill().map((_, i) => i * 1000),
                series: [
                    {data: new Array(20).fill().map((_, i) =>...