Project

General

Profile

Download (12.6 KB) Statistics
| Branch: | Revision:
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-value,
94
.apexcharts-tooltip-text-z-value {
95
  display: inline-block;
96
  font-weight: 600;
97
  margin-left: 5px;
98
}
99

    
100
.apexcharts-tooltip-text-z-label:empty,
101
.apexcharts-tooltip-text-z-value:empty {
102
  display: none;
103
}
104

    
105
.apexcharts-tooltip-text-value,
106
.apexcharts-tooltip-text-z-value {
107
  font-weight: 600;
108
}
109

    
110
.apexcharts-tooltip-marker {
111
  width: 12px;
112
  height: 12px;
113
  position: relative;
114
  top: 0px;
115
  margin-right: 10px;
116
  border-radius: 50%;
117
}
118

    
119
.apexcharts-tooltip-series-group {
120
  padding: 0 10px;
121
  display: none;
122
  text-align: left;
123
  justify-content: left;
124
  align-items: center;
125
}
126

    
127
.apexcharts-tooltip-series-group.apexcharts-active .apexcharts-tooltip-marker {
128
  opacity: 1;
129
}
130

    
131
.apexcharts-tooltip-series-group.apexcharts-active,
132
.apexcharts-tooltip-series-group:last-child {
133
  padding-bottom: 4px;
134
}
135

    
136
.apexcharts-tooltip-series-group-hidden {
137
  opacity: 0;
138
  height: 0;
139
  line-height: 0;
140
  padding: 0 !important;
141
}
142

    
143
.apexcharts-tooltip-y-group {
144
  padding: 6px 0 5px;
145
}
146

    
147
.apexcharts-tooltip-candlestick {
148
  padding: 4px 8px;
149
}
150

    
151
.apexcharts-tooltip-candlestick>div {
152
  margin: 4px 0;
153
}
154

    
155
.apexcharts-tooltip-candlestick span.value {
156
  font-weight: bold;
157
}
158

    
159
.apexcharts-tooltip-rangebar {
160
  padding: 5px 8px;
161
}
162

    
163
.apexcharts-tooltip-rangebar .category {
164
  font-weight: 600;
165
  color: #777;
166
}
167

    
168
.apexcharts-tooltip-rangebar .series-name {
169
  font-weight: bold;
170
  display: block;
171
  margin-bottom: 5px;
172
}
173

    
174
.apexcharts-xaxistooltip {
175
  opacity: 0;
176
  padding: 9px 10px;
177
  pointer-events: none;
178
  color: #373d3f;
179
  font-size: 13px;
180
  text-align: center;
181
  border-radius: 2px;
182
  position: absolute;
183
  z-index: 10;
184
  background: #ECEFF1;
185
  border: 1px solid #90A4AE;
186
  transition: 0.15s ease all;
187
}
188

    
189
.apexcharts-xaxistooltip.apexcharts-theme-dark {
190
  background: rgba(0, 0, 0, 0.7);
191
  border: 1px solid rgba(0, 0, 0, 0.5);
192
  color: #fff;
193
}
194

    
195
.apexcharts-xaxistooltip:after,
196
.apexcharts-xaxistooltip:before {
197
  left: 50%;
198
  border: solid transparent;
199
  content: " ";
200
  height: 0;
201
  width: 0;
202
  position: absolute;
203
  pointer-events: none;
204
}
205

    
206
.apexcharts-xaxistooltip:after {
207
  border-color: rgba(236, 239, 241, 0);
208
  border-width: 6px;
209
  margin-left: -6px;
210
}
211

    
212
.apexcharts-xaxistooltip:before {
213
  border-color: rgba(144, 164, 174, 0);
214
  border-width: 7px;
215
  margin-left: -7px;
216
}
217

    
218
.apexcharts-xaxistooltip-bottom:after,
219
.apexcharts-xaxistooltip-bottom:before {
220
  bottom: 100%;
221
}
222

    
223
.apexcharts-xaxistooltip-top:after,
224
.apexcharts-xaxistooltip-top:before {
225
  top: 100%;
226
}
227

    
228
.apexcharts-xaxistooltip-bottom:after {
229
  border-bottom-color: #ECEFF1;
230
}
231

    
232
.apexcharts-xaxistooltip-bottom:before {
233
  border-bottom-color: #90A4AE;
234
}
235

    
236
.apexcharts-xaxistooltip-bottom.apexcharts-theme-dark:after {
237
  border-bottom-color: rgba(0, 0, 0, 0.5);
238
}
239

    
240
.apexcharts-xaxistooltip-bottom.apexcharts-theme-dark:before {
241
  border-bottom-color: rgba(0, 0, 0, 0.5);
242
}
243

    
244
.apexcharts-xaxistooltip-top:after {
245
  border-top-color: #ECEFF1
246
}
247

    
248
.apexcharts-xaxistooltip-top:before {
249
  border-top-color: #90A4AE;
250
}
251

    
252
.apexcharts-xaxistooltip-top.apexcharts-theme-dark:after {
253
  border-top-color: rgba(0, 0, 0, 0.5);
254
}
255

    
256
.apexcharts-xaxistooltip-top.apexcharts-theme-dark:before {
257
  border-top-color: rgba(0, 0, 0, 0.5);
258
}
259

    
260
.apexcharts-xaxistooltip.apexcharts-active {
261
  opacity: 1;
262
  transition: 0.15s ease all;
263
}
264

    
265
.apexcharts-yaxistooltip {
266
  opacity: 0;
267
  padding: 4px 10px;
268
  pointer-events: none;
269
  color: #373d3f;
270
  font-size: 13px;
271
  text-align: center;
272
  border-radius: 2px;
273
  position: absolute;
274
  z-index: 10;
275
  background: #ECEFF1;
276
  border: 1px solid #90A4AE;
277
}
278

    
279
.apexcharts-yaxistooltip.apexcharts-theme-dark {
280
  background: rgba(0, 0, 0, 0.7);
281
  border: 1px solid rgba(0, 0, 0, 0.5);
282
  color: #fff;
283
}
284

    
285
.apexcharts-yaxistooltip:after,
286
.apexcharts-yaxistooltip:before {
287
  top: 50%;
288
  border: solid transparent;
289
  content: " ";
290
  height: 0;
291
  width: 0;
292
  position: absolute;
293
  pointer-events: none;
294
}
295

    
296
.apexcharts-yaxistooltip:after {
297
  border-color: rgba(236, 239, 241, 0);
298
  border-width: 6px;
299
  margin-top: -6px;
300
}
301

    
302
.apexcharts-yaxistooltip:before {
303
  border-color: rgba(144, 164, 174, 0);
304
  border-width: 7px;
305
  margin-top: -7px;
306
}
307

    
308
.apexcharts-yaxistooltip-left:after,
309
.apexcharts-yaxistooltip-left:before {
310
  left: 100%;
311
}
312

    
313
.apexcharts-yaxistooltip-right:after,
314
.apexcharts-yaxistooltip-right:before {
315
  right: 100%;
316
}
317

    
318
.apexcharts-yaxistooltip-left:after {
319
  border-left-color: #ECEFF1;
320
}
321

    
322
.apexcharts-yaxistooltip-left:before {
323
  border-left-color: #90A4AE;
324
}
325

    
326
.apexcharts-yaxistooltip-left.apexcharts-theme-dark:after {
327
  border-left-color: rgba(0, 0, 0, 0.5);
328
}
329

    
330
.apexcharts-yaxistooltip-left.apexcharts-theme-dark:before {
331
  border-left-color: rgba(0, 0, 0, 0.5);
332
}
333

    
334
.apexcharts-yaxistooltip-right:after {
335
  border-right-color: #ECEFF1;
336
}
337

    
338
.apexcharts-yaxistooltip-right:before {
339
  border-right-color: #90A4AE;
340
}
341

    
342
.apexcharts-yaxistooltip-right.apexcharts-theme-dark:after {
343
  border-right-color: rgba(0, 0, 0, 0.5);
344
}
345

    
346
.apexcharts-yaxistooltip-right.apexcharts-theme-dark:before {
347
  border-right-color: rgba(0, 0, 0, 0.5);
348
}
349

    
350
.apexcharts-yaxistooltip.apexcharts-active {
351
  opacity: 1;
352
}
353

    
354
.apexcharts-yaxistooltip-hidden {
355
  display: none;
356
}
357

    
358
.apexcharts-xcrosshairs,
359
.apexcharts-ycrosshairs {
360
  pointer-events: none;
361
  opacity: 0;
362
  transition: 0.15s ease all;
363
}
364

    
365
.apexcharts-xcrosshairs.apexcharts-active,
366
.apexcharts-ycrosshairs.apexcharts-active {
367
  opacity: 1;
368
  transition: 0.15s ease all;
369
}
370

    
371
.apexcharts-ycrosshairs-hidden {
372
  opacity: 0;
373
}
374

    
375
.apexcharts-selection-rect {
376
  cursor: move;
377
}
378

    
379
.svg_select_boundingRect, .svg_select_points_rot {
380
  pointer-events: none;
381
  opacity: 0;
382
  visibility: hidden;
383
}
384
.apexcharts-selection-rect + g .svg_select_boundingRect,
385
.apexcharts-selection-rect + g .svg_select_points_rot {
386
  opacity: 0;
387
  visibility: hidden;
388
}
389

    
390
.apexcharts-selection-rect + g .svg_select_points_l,
391
.apexcharts-selection-rect + g .svg_select_points_r {
392
  cursor: ew-resize;
393
  opacity: 1;
394
  visibility: visible;
395
}
396

    
397
.svg_select_points {
398
  fill: #efefef;
399
  stroke: #333;
400
  rx: 2;
401
}
402

    
403
.apexcharts-svg.apexcharts-zoomable.hovering-zoom {
404
  cursor: crosshair
405
}
406

    
407
.apexcharts-svg.apexcharts-zoomable.hovering-pan {
408
  cursor: move
409
}
410

    
411
.apexcharts-zoom-icon,
412
.apexcharts-zoomin-icon,
413
.apexcharts-zoomout-icon,
414
.apexcharts-reset-icon,
415
.apexcharts-pan-icon,
416
.apexcharts-selection-icon,
417
.apexcharts-menu-icon,
418
.apexcharts-toolbar-custom-icon {
419
  cursor: pointer;
420
  width: 20px;
421
  height: 20px;
422
  line-height: 24px;
423
  color: #6E8192;
424
  text-align: center;
425
}
426

    
427
.apexcharts-zoom-icon svg,
428
.apexcharts-zoomin-icon svg,
429
.apexcharts-zoomout-icon svg,
430
.apexcharts-reset-icon svg,
431
.apexcharts-menu-icon svg {
432
  fill: #6E8192;
433
}
434

    
435
.apexcharts-selection-icon svg {
436
  fill: #444;
437
  transform: scale(0.76)
438
}
439

    
440
.apexcharts-theme-dark .apexcharts-zoom-icon svg,
441
.apexcharts-theme-dark .apexcharts-zoomin-icon svg,
442
.apexcharts-theme-dark .apexcharts-zoomout-icon svg,
443
.apexcharts-theme-dark .apexcharts-reset-icon svg,
444
.apexcharts-theme-dark .apexcharts-pan-icon svg,
445
.apexcharts-theme-dark .apexcharts-selection-icon svg,
446
.apexcharts-theme-dark .apexcharts-menu-icon svg,
447
.apexcharts-theme-dark .apexcharts-toolbar-custom-icon svg {
448
  fill: #f3f4f5;
449
}
450

    
451
.apexcharts-canvas .apexcharts-zoom-icon.apexcharts-selected svg,
452
.apexcharts-canvas .apexcharts-selection-icon.apexcharts-selected svg,
453
.apexcharts-canvas .apexcharts-reset-zoom-icon.apexcharts-selected svg {
454
  fill: #008FFB;
455
}
456

    
457
.apexcharts-theme-light .apexcharts-selection-icon:not(.apexcharts-selected):hover svg,
458
.apexcharts-theme-light .apexcharts-zoom-icon:not(.apexcharts-selected):hover svg,
459
.apexcharts-theme-light .apexcharts-zoomin-icon:hover svg,
460
.apexcharts-theme-light .apexcharts-zoomout-icon:hover svg,
461
.apexcharts-theme-light .apexcharts-reset-icon:hover svg,
462
.apexcharts-theme-light .apexcharts-menu-icon:hover svg {
463
  fill: #333;
464
}
465

    
466
.apexcharts-selection-icon,
467
.apexcharts-menu-icon {
468
  position: relative;
469
}
470

    
471
.apexcharts-reset-icon {
472
  margin-left: 5px;
473
}
474

    
475
.apexcharts-zoom-icon,
476
.apexcharts-reset-icon,
477
.apexcharts-menu-icon {
478
  transform: scale(0.85);
479
}
480

    
481
.apexcharts-zoomin-icon,
482
.apexcharts-zoomout-icon {
483
  transform: scale(0.7)
484
}
485

    
486
.apexcharts-zoomout-icon {
487
  margin-right: 3px;
488
}
489

    
490
.apexcharts-pan-icon {
491
  transform: scale(0.62);
492
  position: relative;
493
  left: 1px;
494
  top: 0px;
495
}
496

    
497
.apexcharts-pan-icon svg {
498
  fill: #fff;
499
  stroke: #6E8192;
500
  stroke-width: 2;
501
}
502

    
503
.apexcharts-pan-icon.apexcharts-selected svg {
504
  stroke: #008FFB;
505
}
506

    
507
.apexcharts-pan-icon:not(.apexcharts-selected):hover svg {
508
  stroke: #333;
509
}
510

    
511
.apexcharts-toolbar {
512
  position: absolute;
513
  z-index: 11;
514
  max-width: 176px;
515
  text-align: right;
516
  border-radius: 3px;
517
  padding: 0px 6px 2px 6px;
518
  display: flex;
519
  justify-content: space-between;
520
  align-items: center;
521
}
522

    
523
.apexcharts-menu {
524
  background: #fff;
525
  position: absolute;
526
  top: 100%;
527
  border: 1px solid #ddd;
528
  border-radius: 3px;
529
  padding: 3px;
530
  right: 10px;
531
  opacity: 0;
532
  min-width: 110px;
533
  transition: 0.15s ease all;
534
  pointer-events: none;
535
}
536

    
537
.apexcharts-menu.apexcharts-menu-open {
538
  opacity: 1;
539
  pointer-events: all;
540
  transition: 0.15s ease all;
541
}
542

    
543
.apexcharts-menu-item {
544
  padding: 6px 7px;
545
  font-size: 12px;
546
  cursor: pointer;
547
}
548

    
549
.apexcharts-theme-light .apexcharts-menu-item:hover {
550
  background: #eee;
551
}
552

    
553
.apexcharts-theme-dark .apexcharts-menu {
554
  background: rgba(0, 0, 0, 0.7);
555
  color: #fff;
556
}
557

    
558
@media screen and (min-width: 768px) {
559
  .apexcharts-canvas:hover .apexcharts-toolbar {
560
    opacity: 1;
561
  }
562
}
563

    
564
.apexcharts-datalabel.apexcharts-element-hidden {
565
  opacity: 0;
566
}
567

    
568
.apexcharts-pie-label,
569
.apexcharts-datalabels,
570
.apexcharts-datalabel,
571
.apexcharts-datalabel-label,
572
.apexcharts-datalabel-value {
573
  cursor: default;
574
  pointer-events: none;
575
}
576

    
577
.apexcharts-pie-label-delay {
578
  opacity: 0;
579
  animation-name: opaque;
580
  animation-duration: 0.3s;
581
  animation-fill-mode: forwards;
582
  animation-timing-function: ease;
583
}
584

    
585
.apexcharts-canvas .apexcharts-element-hidden {
586
  opacity: 0;
587
}
588

    
589
.apexcharts-hide .apexcharts-series-points {
590
  opacity: 0;
591
}
592

    
593
.apexcharts-gridline,
594
.apexcharts-annotation-rect,
595
.apexcharts-tooltip .apexcharts-marker,
596
.apexcharts-area-series .apexcharts-area,
597
.apexcharts-line,
598
.apexcharts-zoom-rect,
599
.apexcharts-toolbar svg,
600
.apexcharts-area-series .apexcharts-series-markers .apexcharts-marker.no-pointer-events,
601
.apexcharts-line-series .apexcharts-series-markers .apexcharts-marker.no-pointer-events,
602
.apexcharts-radar-series path,
603
.apexcharts-radar-series polygon {
604
  pointer-events: none;
605
}
606

    
607

    
608
/* markers */
609

    
610
.apexcharts-marker {
611
  transition: 0.15s ease all;
612
}
613

    
614
@keyframes opaque {
615
  0% {
616
    opacity: 0;
617
  }
618
  100% {
619
    opacity: 1;
620
  }
621
}
622

    
623

    
624
/* Resize generated styles */
625

    
626
@keyframes resizeanim {
627
  from {
628
    opacity: 0;
629
  }
630
  to {
631
    opacity: 0;
632
  }
633
}
634

    
635
.resize-triggers {
636
  animation: 1ms resizeanim;
637
  visibility: hidden;
638
  opacity: 0;
639
}
640

    
641
.resize-triggers,
642
.resize-triggers>div,
643
.contract-trigger:before {
644
  content: " ";
645
  display: block;
646
  position: absolute;
647
  top: 0;
648
  left: 0;
649
  height: 100%;
650
  width: 100%;
651
  overflow: hidden;
652
}
653

    
654
.resize-triggers>div {
655
  background: #eee;
656
  overflow: auto;
657
}
658

    
659
.contract-trigger:before {
660
  width: 200%;
661
  height: 200%;
662
}
(4-4/7)