связанные sparkline'ы с такими условиями: tooltip отображается всегда и если мышь не наведена на график, то отображается последнее значение графика, tooltip должен располагаться справа от графика (не поверх, а именно справа)
попробовал 2 подхода:
1. сверстал отдельно графики, отдельно внешние tooltip'ы, при перемещении мыши испускал событие с dataPointIndex, ловил родителем, присваивал в свойство дочерних объектов, а там уже брал значение из серии для конкретного графика. Проблемы: видимо из-за выставления свойства (props) пересчитывается слишком много объектов и, соответственно, объект свойств apexcharts и это люто тормозит + есть глюк что всем графикам присваиваются цвета с последнего на странице
2. родной tooltip сместил правее графиков, css-ом. Проблемы: используется абсолютное значение в пикселях (иначе дёргается при смене значений), при изменении размеров контейнера с графиком и tooltip'ом последний начинает неправильно позиционироваться (что логично), практически полностью надо переписывать css самого apexchart'а относительно tooltip'ов с модификатором !important (короч чувствуется, что решение прям так себе)
По итогу хотелось бы что-то более близкое к первому подходу, чтобы нормально можно было сверстать и не трогать css apexchart'а, но при этом это всё не тормозило
у второго варианта ещё одна проблема, которую не понял как решить пока: пока не навёл мышь в первый раз тултип вообще не виден
Обсуждают сегодня