_c3-chart.scss 3.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254
  1. /*-- Chart --*/
  2. .c3 {
  3. svg {
  4. font: 10px sans-serif;
  5. -webkit-tap-highlight-color: transparent;
  6. font-family: "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  7. }
  8. path,
  9. line {
  10. fill: none;
  11. stroke: rgba(0, 40, 100, 0.12);
  12. }
  13. text {
  14. -webkit-user-select: none;
  15. -moz-user-select: none;
  16. -ms-user-select: none;
  17. user-select: none;
  18. font-size: px2rem(12px);
  19. }
  20. }
  21. .c3-legend-item-tile,
  22. .c3-xgrid-focus,
  23. .c3-ygrid,
  24. .c3-event-rect,
  25. .c3-bars path {
  26. shape-rendering: crispEdges;
  27. }
  28. .c3-chart-arc {
  29. path {
  30. stroke: #fff;
  31. }
  32. text {
  33. fill: #fff;
  34. font-size: 13px;
  35. }
  36. }
  37. /*-- Axis --*/
  38. /*-- Grid --*/
  39. .c3-grid {
  40. line {
  41. stroke: #f0f0f0;
  42. }
  43. text {
  44. fill: #aaa;
  45. }
  46. }
  47. .c3-xgrid,
  48. .c3-ygrid {
  49. stroke: #e6e6e6;
  50. stroke-dasharray: 2 4;
  51. }
  52. /*-- Text on Chart --*/
  53. .c3-text {
  54. font-size: 12px;
  55. &.c3-empty {
  56. fill: #808080;
  57. font-size: 2em;
  58. }
  59. }
  60. /*-- Line --*/
  61. .c3-line {
  62. stroke-width: 2px;
  63. }
  64. /*-- Point --*/
  65. .c3-circle._expanded_ {
  66. stroke-width: 2px;
  67. stroke: white;
  68. }
  69. .c3-selected-circle {
  70. fill: white;
  71. stroke-width: 1.5px;
  72. }
  73. /*-- Bar --*/
  74. .c3-bar {
  75. stroke-width: 0;
  76. &._expanded_ {
  77. fill-opacity: 1;
  78. fill-opacity: 0.75;
  79. }
  80. }
  81. /*-- Focus --*/
  82. .c3-target {
  83. &.c3-focused {
  84. opacity: 1;
  85. path {
  86. &.c3-line,
  87. &.c3-step {
  88. stroke-width: 2px;
  89. }
  90. }
  91. }
  92. &.c3-defocused {
  93. opacity: 0.3 !important;
  94. }
  95. }
  96. /*-- Region --*/
  97. .c3-region {
  98. fill: steelblue;
  99. fill-opacity: 0.1;
  100. }
  101. /*-- Brush --*/
  102. .c3-brush .extent {
  103. fill-opacity: 0.1;
  104. }
  105. /*-- Select - Drag --*/
  106. /*-- Legend --*/
  107. .c3-legend-item text {
  108. fill: #545454;
  109. font-size: 14px;
  110. }
  111. .c3-legend-item-hidden {
  112. opacity: 0.15;
  113. }
  114. .c3-legend-background {
  115. fill: transparent;
  116. stroke: lightgray;
  117. stroke-width: 0;
  118. }
  119. /*-- Title --*/
  120. .c3-title {
  121. font: 14px sans-serif;
  122. }
  123. /*-- Tooltip --*/
  124. .c3-tooltip-container {
  125. z-index: 10;
  126. }
  127. .c3-tooltip {
  128. border-collapse: collapse;
  129. border-spacing: 0;
  130. empty-cells: show;
  131. font-size: 11px;
  132. line-height: 1;
  133. font-weight: 700;
  134. color: #fff;
  135. border-radius: 3px;
  136. background: #212529;
  137. white-space: nowrap;
  138. th {
  139. padding: 6px 6px;
  140. text-align: start;
  141. }
  142. td {
  143. padding: 4px 6px;
  144. font-weight: 400;
  145. > span {
  146. display: inline-block;
  147. width: 8px;
  148. height: 8px;
  149. margin-inline-end: 8px;
  150. border-radius: 50%;
  151. vertical-align: baseline;
  152. }
  153. &.value {
  154. text-align: end;
  155. }
  156. }
  157. }
  158. /*-- Area --*/
  159. .c3-area {
  160. stroke-width: 0;
  161. opacity: 0.1;
  162. }
  163. .c3-target-filled .c3-area {
  164. opacity: 1 !important;
  165. }
  166. /*-- Arc --*/
  167. .c3-chart-arcs-title {
  168. font-size: 1.3em;
  169. }
  170. .c3-chart-arcs {
  171. .c3-chart-arcs-background {
  172. fill: #e0e0e0;
  173. stroke: none;
  174. }
  175. .c3-chart-arcs-gauge-unit {
  176. fill: #000;
  177. font-size: 16px;
  178. }
  179. .c3-chart-arcs-gauge-max,
  180. .c3-chart-arcs-gauge-min {
  181. fill: #777;
  182. }
  183. }
  184. .c3-chart-arc {
  185. .c3-gauge-value {
  186. fill: #000;
  187. /* font-size: 28px !important;*/
  188. }
  189. &.c3-target {
  190. g path,
  191. &.c3-focused g path {
  192. opacity: 1;
  193. }
  194. }
  195. }
  196. .c3-axis {
  197. fill: #9aa0ac;
  198. }