1.apexcharts-canvas { 2 position: relative; 3 user-select: none; 4 /* cannot give overflow: hidden as it will crop tooltips which overflow outside chart area */ 5} 6 7 8/* scrollbar is not visible by default for legend, hence forcing the visibility */ 9.apexcharts-canvas ::-webkit-scrollbar { 10 -webkit-appearance: none; 11 width: 6px; 12} 13 14.apexcharts-canvas ::-webkit-scrollbar-thumb { 15 border-radius: 4px; 16 background-color: rgba(0, 0, 0, .5); 17 box-shadow: 0 0 1px rgba(255, 255, 255, .5); 18 -webkit-box-shadow: 0 0 1px rgba(255, 255, 255, .5); 19} 20 21 22.apexcharts-inner { 23 position: relative; 24} 25 26.apexcharts-text tspan { 27 font-family: inherit; 28} 29 30.legend-mouseover-inactive { 31 transition: 0.15s ease all; 32 opacity: 0.20; 33} 34 35.apexcharts-series-collapsed { 36 opacity: 0; 37} 38 39.apexcharts-tooltip { 40 border-radius: 5px; 41 box-shadow: 2px 2px 6px -4px #999; 42 cursor: default; 43 font-size: 14px; 44 left: 62px; 45 opacity: 0; 46 pointer-events: none; 47 position: absolute; 48 top: 20px; 49 display: flex; 50 flex-direction: column; 51 overflow: hidden; 52 white-space: nowrap; 53 z-index: 12; 54 transition: 0.15s ease all; 55} 56 57.apexcharts-tooltip.apexcharts-active { 58 opacity: 1; 59 transition: 0.15s ease all; 60} 61 62.apexcharts-tooltip.apexcharts-theme-light { 63 border: 1px solid #e3e3e3; 64 background: rgba(255, 255, 255, 0.96); 65} 66 67.apexcharts-tooltip.apexcharts-theme-dark { 68 color: #fff; 69 background: rgba(30, 30, 30, 0.8); 70} 71 72.apexcharts-tooltip * { 73 font-family: inherit; 74} 75 76 77.apexcharts-tooltip-title { 78 padding: 6px; 79 font-size: 15px; 80 margin-bottom: 4px; 81} 82 83.apexcharts-tooltip.apexcharts-theme-light .apexcharts-tooltip-title { 84 background: #ECEFF1; 85 border-bottom: 1px solid #ddd; 86} 87 88.apexcharts-tooltip.apexcharts-theme-dark .apexcharts-tooltip-title { 89 background: rgba(0, 0, 0, 0.7); 90 border-bottom: 1px solid #333; 91} 92 93.apexcharts-tooltip-text-y-value, 94.apexcharts-tooltip-text-goals-value, 95.apexcharts-tooltip-text-z-value { 96 display: inline-block; 97 font-weight: 600; 98 margin-left: 5px; 99} 100 101.apexcharts-tooltip-text-y-label:empty, 102.apexcharts-tooltip-text-y-value:empty, 103.apexcharts-tooltip-text-goals-label:empty, 104.apexcharts-tooltip-text-goals-value:empty, 105.apexcharts-tooltip-text-z-value:empty { 106 display: none; 107} 108 109.apexcharts-tooltip-text-y-value, 110.apexcharts-tooltip-text-goals-value, 111.apexcharts-tooltip-text-z-value { 112 font-weight: 600; 113} 114 115.apexcharts-tooltip-text-goals-label, 116.apexcharts-tooltip-text-goals-value { 117 padding: 6px 0 5px; 118} 119 120.apexcharts-tooltip-goals-group, 121.apexcharts-tooltip-text-goals-label, 122.apexcharts-tooltip-text-goals-value { 123 display: flex; 124} 125.apexcharts-tooltip-text-goals-label:not(:empty), 126.apexcharts-tooltip-text-goals-value:not(:empty) { 127 margin-top: -6px; 128} 129 130.apexcharts-tooltip-marker { 131 width: 12px; 132 height: 12px; 133 position: relative; 134 top: 0px; 135 margin-right: 10px; 136 border-radius: 50%; 137} 138 139.apexcharts-tooltip-series-group { 140 padding: 0 10px; 141 display: none; 142 text-align: left; 143 justify-content: left; 144 align-items: center; 145} 146 147.apexcharts-tooltip-series-group.apexcharts-active .apexcharts-tooltip-marker { 148 opacity: 1; 149} 150 151.apexcharts-tooltip-series-group.apexcharts-active, 152.apexcharts-tooltip-series-group:last-child { 153 padding-bottom: 4px; 154} 155 156.apexcharts-tooltip-series-group-hidden { 157 opacity: 0; 158 height: 0; 159 line-height: 0; 160 padding: 0 !important; 161} 162 163.apexcharts-tooltip-y-group { 164 padding: 6px 0 5px; 165} 166 167.apexcharts-tooltip-box, .apexcharts-custom-tooltip { 168 padding: 4px 8px; 169} 170 171.apexcharts-tooltip-boxPlot { 172 display: flex; 173 flex-direction: column-reverse; 174} 175 176.apexcharts-tooltip-box>div { 177 margin: 4px 0; 178} 179 180.apexcharts-tooltip-box span.value { 181 font-weight: bold; 182} 183 184.apexcharts-tooltip-rangebar { 185 padding: 5px 8px; 186} 187 188.apexcharts-tooltip-rangebar .category { 189 font-weight: 600; 190 color: #777; 191} 192 193.apexcharts-tooltip-rangebar .series-name { 194 font-weight: bold; 195 display: block; 196 margin-bottom: 5px; 197} 198 199.apexcharts-xaxistooltip { 200 opacity: 0; 201 padding: 9px 10px; 202 pointer-events: none; 203 color: #373d3f; 204 font-size: 13px; 205 text-align: center; 206 border-radius: 2px; 207 position: absolute; 208 z-index: 10; 209 background: #ECEFF1; 210 border: 1px solid #90A4AE; 211 transition: 0.15s ease all; 212} 213 214.apexcharts-xaxistooltip.apexcharts-theme-dark { 215 background: rgba(0, 0, 0, 0.7); 216 border: 1px solid rgba(0, 0, 0, 0.5); 217 color: #fff; 218} 219 220.apexcharts-xaxistooltip:after, 221.apexcharts-xaxistooltip:before { 222 left: 50%; 223 border: solid transparent; 224 content: " "; 225 height: 0; 226 width: 0; 227 position: absolute; 228 pointer-events: none; 229} 230 231.apexcharts-xaxistooltip:after { 232 border-color: rgba(236, 239, 241, 0); 233 border-width: 6px; 234 margin-left: -6px; 235} 236 237.apexcharts-xaxistooltip:before { 238 border-color: rgba(144, 164, 174, 0); 239 border-width: 7px; 240 margin-left: -7px; 241} 242 243.apexcharts-xaxistooltip-bottom:after, 244.apexcharts-xaxistooltip-bottom:before { 245 bottom: 100%; 246} 247 248.apexcharts-xaxistooltip-top:after, 249.apexcharts-xaxistooltip-top:before { 250 top: 100%; 251} 252 253.apexcharts-xaxistooltip-bottom:after { 254 border-bottom-color: #ECEFF1; 255} 256 257.apexcharts-xaxistooltip-bottom:before { 258 border-bottom-color: #90A4AE; 259} 260 261.apexcharts-xaxistooltip-bottom.apexcharts-theme-dark:after { 262 border-bottom-color: rgba(0, 0, 0, 0.5); 263} 264 265.apexcharts-xaxistooltip-bottom.apexcharts-theme-dark:before { 266 border-bottom-color: rgba(0, 0, 0, 0.5); 267} 268 269.apexcharts-xaxistooltip-top:after { 270 border-top-color: #ECEFF1 271} 272 273.apexcharts-xaxistooltip-top:before { 274 border-top-color: #90A4AE; 275} 276 277.apexcharts-xaxistooltip-top.apexcharts-theme-dark:after { 278 border-top-color: rgba(0, 0, 0, 0.5); 279} 280 281.apexcharts-xaxistooltip-top.apexcharts-theme-dark:before { 282 border-top-color: rgba(0, 0, 0, 0.5); 283} 284 285.apexcharts-xaxistooltip.apexcharts-active { 286 opacity: 1; 287 transition: 0.15s ease all; 288} 289 290.apexcharts-yaxistooltip { 291 opacity: 0; 292 padding: 4px 10px; 293 pointer-events: none; 294 color: #373d3f; 295 font-size: 13px; 296 text-align: center; 297 border-radius: 2px; 298 position: absolute; 299 z-index: 10; 300 background: #ECEFF1; 301 border: 1px solid #90A4AE; 302} 303 304.apexcharts-yaxistooltip.apexcharts-theme-dark { 305 background: rgba(0, 0, 0, 0.7); 306 border: 1px solid rgba(0, 0, 0, 0.5); 307 color: #fff; 308} 309 310.apexcharts-yaxistooltip:after, 311.apexcharts-yaxistooltip:before { 312 top: 50%; 313 border: solid transparent; 314 content: " "; 315 height: 0; 316 width: 0; 317 position: absolute; 318 pointer-events: none; 319} 320 321.apexcharts-yaxistooltip:after { 322 border-color: rgba(236, 239, 241, 0); 323 border-width: 6px; 324 margin-top: -6px; 325} 326 327.apexcharts-yaxistooltip:before { 328 border-color: rgba(144, 164, 174, 0); 329 border-width: 7px; 330 margin-top: -7px; 331} 332 333.apexcharts-yaxistooltip-left:after, 334.apexcharts-yaxistooltip-left:before { 335 left: 100%; 336} 337 338.apexcharts-yaxistooltip-right:after, 339.apexcharts-yaxistooltip-right:before { 340 right: 100%; 341} 342 343.apexcharts-yaxistooltip-left:after { 344 border-left-color: #ECEFF1; 345} 346 347.apexcharts-yaxistooltip-left:before { 348 border-left-color: #90A4AE; 349} 350 351.apexcharts-yaxistooltip-left.apexcharts-theme-dark:after { 352 border-left-color: rgba(0, 0, 0, 0.5); 353} 354 355.apexcharts-yaxistooltip-left.apexcharts-theme-dark:before { 356 border-left-color: rgba(0, 0, 0, 0.5); 357} 358 359.apexcharts-yaxistooltip-right:after { 360 border-right-color: #ECEFF1; 361} 362 363.apexcharts-yaxistooltip-right:before { 364 border-right-color: #90A4AE; 365} 366 367.apexcharts-yaxistooltip-right.apexcharts-theme-dark:after { 368 border-right-color: rgba(0, 0, 0, 0.5); 369} 370 371.apexcharts-yaxistooltip-right.apexcharts-theme-dark:before { 372 border-right-color: rgba(0, 0, 0, 0.5); 373} 374 375.apexcharts-yaxistooltip.apexcharts-active { 376 opacity: 1; 377} 378 379.apexcharts-yaxistooltip-hidden { 380 display: none; 381} 382 383.apexcharts-xcrosshairs, 384.apexcharts-ycrosshairs { 385 pointer-events: none; 386 opacity: 0; 387 transition: 0.15s ease all; 388} 389 390.apexcharts-xcrosshairs.apexcharts-active, 391.apexcharts-ycrosshairs.apexcharts-active { 392 opacity: 1; 393 transition: 0.15s ease all; 394} 395 396.apexcharts-ycrosshairs-hidden { 397 opacity: 0; 398} 399 400.apexcharts-selection-rect { 401 cursor: move; 402} 403 404.svg_select_boundingRect, .svg_select_points_rot { 405 pointer-events: none; 406 opacity: 0; 407 visibility: hidden; 408} 409.apexcharts-selection-rect + g .svg_select_boundingRect, 410.apexcharts-selection-rect + g .svg_select_points_rot { 411 opacity: 0; 412 visibility: hidden; 413} 414 415.apexcharts-selection-rect + g .svg_select_points_l, 416.apexcharts-selection-rect + g .svg_select_points_r { 417 cursor: ew-resize; 418 opacity: 1; 419 visibility: visible; 420} 421 422.svg_select_points { 423 fill: #efefef; 424 stroke: #333; 425 rx: 2; 426} 427 428.apexcharts-svg { 429 height: auto; 430} 431 432.apexcharts-svg.apexcharts-zoomable.hovering-zoom { 433 cursor: crosshair 434} 435 436.apexcharts-svg.apexcharts-zoomable.hovering-pan { 437 cursor: move 438} 439 440.apexcharts-zoom-icon, 441.apexcharts-zoomin-icon, 442.apexcharts-zoomout-icon, 443.apexcharts-reset-icon, 444.apexcharts-pan-icon, 445.apexcharts-selection-icon, 446.apexcharts-menu-icon, 447.apexcharts-toolbar-custom-icon { 448 cursor: pointer; 449 width: 20px; 450 height: 20px; 451 line-height: 24px; 452 color: #6E8192; 453 text-align: center; 454} 455 456.apexcharts-zoom-icon svg, 457.apexcharts-zoomin-icon svg, 458.apexcharts-zoomout-icon svg, 459.apexcharts-reset-icon svg, 460.apexcharts-menu-icon svg { 461 fill: #6E8192; 462} 463 464.apexcharts-selection-icon svg { 465 fill: #444; 466 transform: scale(0.76) 467} 468 469.apexcharts-theme-dark .apexcharts-zoom-icon svg, 470.apexcharts-theme-dark .apexcharts-zoomin-icon svg, 471.apexcharts-theme-dark .apexcharts-zoomout-icon svg, 472.apexcharts-theme-dark .apexcharts-reset-icon svg, 473.apexcharts-theme-dark .apexcharts-pan-icon svg, 474.apexcharts-theme-dark .apexcharts-selection-icon svg, 475.apexcharts-theme-dark .apexcharts-menu-icon svg, 476.apexcharts-theme-dark .apexcharts-toolbar-custom-icon svg { 477 fill: #f3f4f5; 478} 479 480.apexcharts-canvas .apexcharts-zoom-icon.apexcharts-selected svg, 481.apexcharts-canvas .apexcharts-selection-icon.apexcharts-selected svg, 482.apexcharts-canvas .apexcharts-reset-zoom-icon.apexcharts-selected svg { 483 fill: #008FFB; 484} 485 486.apexcharts-theme-light .apexcharts-selection-icon:not(.apexcharts-selected):hover svg, 487.apexcharts-theme-light .apexcharts-zoom-icon:not(.apexcharts-selected):hover svg, 488.apexcharts-theme-light .apexcharts-zoomin-icon:hover svg, 489.apexcharts-theme-light .apexcharts-zoomout-icon:hover svg, 490.apexcharts-theme-light .apexcharts-reset-icon:hover svg, 491.apexcharts-theme-light .apexcharts-menu-icon:hover svg { 492 fill: #333; 493} 494 495.apexcharts-selection-icon, 496.apexcharts-menu-icon { 497 position: relative; 498} 499 500.apexcharts-reset-icon { 501 margin-left: 5px; 502} 503 504.apexcharts-zoom-icon, 505.apexcharts-reset-icon, 506.apexcharts-menu-icon { 507 transform: scale(0.85); 508} 509 510.apexcharts-zoomin-icon, 511.apexcharts-zoomout-icon { 512 transform: scale(0.7) 513} 514 515.apexcharts-zoomout-icon { 516 margin-right: 3px; 517} 518 519.apexcharts-pan-icon { 520 transform: scale(0.62); 521 position: relative; 522 left: 1px; 523 top: 0px; 524} 525 526.apexcharts-pan-icon svg { 527 fill: #fff; 528 stroke: #6E8192; 529 stroke-width: 2; 530} 531 532.apexcharts-pan-icon.apexcharts-selected svg { 533 stroke: #008FFB; 534} 535 536.apexcharts-pan-icon:not(.apexcharts-selected):hover svg { 537 stroke: #333; 538} 539 540.apexcharts-toolbar { 541 position: absolute; 542 z-index: 11; 543 max-width: 176px; 544 text-align: right; 545 border-radius: 3px; 546 padding: 0px 6px 2px 6px; 547 display: flex; 548 justify-content: space-between; 549 align-items: center; 550} 551 552.apexcharts-menu { 553 background: #fff; 554 position: absolute; 555 top: 100%; 556 border: 1px solid #ddd; 557 border-radius: 3px; 558 padding: 3px; 559 right: 10px; 560 opacity: 0; 561 min-width: 110px; 562 transition: 0.15s ease all; 563 pointer-events: none; 564} 565 566.apexcharts-menu.apexcharts-menu-open { 567 opacity: 1; 568 pointer-events: all; 569 transition: 0.15s ease all; 570} 571 572.apexcharts-menu-item { 573 padding: 6px 7px; 574 font-size: 12px; 575 cursor: pointer; 576} 577 578.apexcharts-theme-light .apexcharts-menu-item:hover { 579 background: #eee; 580} 581 582.apexcharts-theme-dark .apexcharts-menu { 583 background: rgba(0, 0, 0, 0.7); 584 color: #fff; 585} 586 587@media screen and (min-width: 768px) { 588 .apexcharts-canvas:hover .apexcharts-toolbar { 589 opacity: 1; 590 } 591} 592 593.apexcharts-datalabel.apexcharts-element-hidden { 594 opacity: 0; 595} 596 597.apexcharts-pie-label, 598.apexcharts-datalabels, 599.apexcharts-datalabel, 600.apexcharts-datalabel-label, 601.apexcharts-datalabel-value { 602 cursor: default; 603 pointer-events: none; 604} 605 606.apexcharts-pie-label-delay { 607 opacity: 0; 608 animation-name: opaque; 609 animation-duration: 0.3s; 610 animation-fill-mode: forwards; 611 animation-timing-function: ease; 612} 613 614.apexcharts-canvas .apexcharts-element-hidden { 615 opacity: 0; 616} 617 618.apexcharts-hide .apexcharts-series-points { 619 opacity: 0; 620} 621 622.apexcharts-gridline, 623.apexcharts-annotation-rect, 624.apexcharts-tooltip .apexcharts-marker, 625.apexcharts-area-series .apexcharts-area, 626.apexcharts-line, 627.apexcharts-zoom-rect, 628.apexcharts-toolbar svg, 629.apexcharts-area-series .apexcharts-series-markers .apexcharts-marker.no-pointer-events, 630.apexcharts-line-series .apexcharts-series-markers .apexcharts-marker.no-pointer-events, 631.apexcharts-radar-series path, 632.apexcharts-radar-series polygon { 633 pointer-events: none; 634} 635 636 637/* markers */ 638 639.apexcharts-marker { 640 transition: 0.15s ease all; 641} 642 643@keyframes opaque { 644 0% { 645 opacity: 0; 646 } 647 100% { 648 opacity: 1; 649 } 650} 651 652 653/* Resize generated styles */ 654 655@keyframes resizeanim { 656 from { 657 opacity: 0; 658 } 659 to { 660 opacity: 0; 661 } 662} 663 664.resize-triggers { 665 animation: 1ms resizeanim; 666 visibility: hidden; 667 opacity: 0; 668} 669 670.resize-triggers, 671.resize-triggers>div, 672.contract-trigger:before { 673 content: " "; 674 display: block; 675 position: absolute; 676 top: 0; 677 left: 0; 678 height: 100%; 679 width: 100%; 680 overflow: hidden; 681} 682 683.resize-triggers>div { 684 background: #eee; 685 overflow: auto; 686} 687 688.contract-trigger:before { 689 width: 200%; 690 height: 200%; 691} 692