TransgenerationalEffectOfNutrition/distrochart.css at master · extavourlab/TransgenerationalEffectOfNutrition · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
/*Primary Chart*/

/*Nested divs for responsiveness*/
.chart-wrapper {
    max-width: 800px;  /*Overwritten by the JS*/
    min-width: 304px;
    margin-bottom: 8px;
    background-color: #FAF7F7;
}
.chart-wrapper .inner-wrapper {
    position: relative;
    padding-bottom: 50%; /*Overwritten by the JS*/
    width: 100%;
}
.chart-wrapper .outer-box {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}
.chart-wrapper .inner-box {
    width: 100%;
    height: 100%;
}

.chart-wrapper text {
  font-family: sans-serif;
  font-size: 13px;
}

.chart-wrapper .axis path,
.chart-wrapper .axis line {
    fill: none;
    stroke: #888;
    stroke-width: 2px;
    shape-rendering: crispEdges;
}

.chart-wrapper .y.axis .tick line {
    stroke: lightgrey;
    opacity: 0.6;
    stroke-dasharray: 2,1;
    stroke-width: 1;
    shape-rendering: crispEdges;

}

.chart-wrapper .x.axis .domain {
  display: none;
}

.chart-wrapper div.tooltip {
    position: absolute;
    text-align: left;
    padding: 3px;
    font: 12px sans-serif;
    background: lightcyan;
    border: 0px;
    border-radius: 1px;
    pointer-events: none;
    opacity: 0.7;
}

/*Box Plot*/
.chart-wrapper .box-plot .box {
    fill-opacity: 0.4;
    stroke-width: 2;
}
.chart-wrapper .box-plot line {
    stroke-width: 2px;
}
.chart-wrapper .box-plot circle {
    fill: white;
    stroke: black;
}

.chart-wrapper .box-plot .median {
    stroke: black;
}

.chart-wrapper .box-plot circle.median {
    /*the script makes the circles the same color as the box, you can override this in the js*/
    fill: white !important;
}

.chart-wrapper .box-plot .mean {
    stroke: white;
    stroke-dasharray: 2,1;
    stroke-width: 1px;
}

@media (max-width:500px){
    .chart-wrapper .box-plot circle {display: none;}
}

/*Violin Plot*/

.chart-wrapper .violin-plot .area {
    shape-rendering: geometricPrecision;
    opacity: 0.4;
}

.chart-wrapper .violin-plot .line {
    fill: none;
    stroke-width: 2px;
    shape-rendering: geometricPrecision;
}

/*Notch Plot*/
.chart-wrapper .notch-plot .notch {
    fill-opacity: 0.4;
    stroke-width: 2;
}

/* Point Plots*/
.chart-wrapper .points-plot .point {
    stroke: black;
    stroke-width: 1px;
}

.chart-wrapper .metrics-lines {
    stroke-width: 4px;
}

/* Non-Chart Styles for demo*/
.chart-options  {
    min-width: 200px;
    font-size: 13px;
    font-family: sans-serif;
}
.chart-options button {
    margin: 3px;
    padding: 3px;
    font-size: 12px;
}
.chart-options p {
    display: inline;
}
@media (max-width:500px){
    .chart-options p {display: block;}
}