I’m trying to use the advanced violin plot in the following example:
https://plotly.com/javascript/violin/
How do I style the color of the y0 labels? i.e. Thursday, Friday, Saturday and Sunday.
The documentation isn’t clear on this. I’m able to style the yaxis and xaxis separately, but since these are sub plots it doesn’t work as intended.
https://codepen.io/crajar/pen/eYeaPpX
var trace1 = {
text: "sample length: 32",
hoveron: "points+kde",
meanline: {
visible: true
},
legendgroup: "F",
scalegroup: "F",
points: "all",
pointpos: 1,
box: {
visible: true
},
jitter: 0,
scalemode: "count",
marker: {
line: {
width: 2,
color: "#bebada"
},
symbol: "line-ns"
},
showlegend: false,
side: "positive",
type: "violin",
name: "F",
span: [
0
],
line: {
color: "#bebada"
},
y0: "Thursday",
x: [
10.07,
34.83,
10.65,
12.43,
24.08,
13.42,
12.48,
29.8,
14.52,
11.38,
20.27,
11.17,
12.26,
18.26,
8.51,
10.33,
14.15,
13.16,
17.47,
27.05,
16.43,
8.35,
18.64,
11.87,
19.81,
43.11,
13.0,
12.74,
13.0,
16.4,
16.47,
18.78
],
orientation: "h"
}
var trace2 = {
text: "sample length: 30",
hoveron: "points+kde",
meanline: {
visible: true
},
legendgroup: "M",
scalegroup: "M",
points: "all",
pointpos: -0.6,
box: {
visible: true
},
jitter: 0,
scalemode: "count",
marker: {
line: {
width: 2,
color: "#8dd3c7"
},
symbol: "line-ns"
},
showlegend: false,
side: "negative",
type: "violin",
name: "M",
span: [
0
],
line: {
color: "#8dd3c7"
},
y0: "Thursday",
x: [
27.2,
22.76,
17.29,
19.44,
16.66,
32.68,
15.98,
13.03,
18.28,
24.71,
21.16,
11.69,
14.26,
15.95,
8.52,
22.82,
19.08,
16.0,
34.3,
41.19,
9.78,
7.51,
28.44,
15.48,
16.58,
7.56,
10.34,
13.51,
18.71,
20.53
],
orientation: "h"
}
var trace3 = {
text: "sample length: 9",
hoveron: "points+kde",
meanline: {
visible: true
},
legendgroup: "F",
scalegroup: "F",
points: "all",
pointpos: 0.4,
box: {
visible: true
},
jitter: 0,
scalemode: "count",
marker: {
line: {
width: 2,
color: "#bebada"
},
symbol: "line-ns"
},
showlegend: false,
side: "positive",
type: "violin",
name: "F",
span: [
0
],
line: {
color: "#bebada"
},
y0: "Friday",
x: [
5.75,
16.32,
22.75,
11.35,
15.38,
13.42,
15.98,
16.27,
10.09
],
orientation: "h"
}
var trace4= {
text: "sample length: 10",
hoveron: "points+kde",
meanline: {
visible: true
},
legendgroup: "M",
scalegroup: "M",
points: "all",
pointpos: -0.3,
box: {
visible: true
},
jitter: 0,
scalemode: "count",
marker: {
line: {
width: 2,
color: "#8dd3c7"
},
symbol: "line-ns"
},
showlegend: false,
side: "negative",
type: "violin",
name: "M",
span: [
0
],
line: {
color: "#8dd3c7"
},
y0: "Friday",
x: [
28.97,
22.49,
40.17,
27.28,
12.03,
21.01,
12.46,
12.16,
8.58,
13.42
],
orientation: "h"
}
var trace5 = {
text: "sample length: 28",
hoveron: "points+kde",
meanline: {
visible: true
},
legendgroup: "F",
scalegroup: "F",
points: "all",
pointpos: 0.55,
box: {
visible: true
},
jitter: 0,
scalemode: "count",
marker: {
line: {
width: 2,
color: "#bebada"
},
symbol: "line-ns"
},
showlegend: true,
side: "positive",
type: "violin",
name: "F",
span: [
0
],
line: {
color: "#bebada"
},
y0: "Saturday",
x: [
20.29,
15.77,
19.65,
15.06,
20.69,
16.93,
26.41,
16.45,
3.07,
17.07,
26.86,
25.28,
14.73,
44.3,
22.42,
20.92,
14.31,
7.25,
10.59,
10.63,
12.76,
13.27,
28.17,
12.9,
30.14,
22.12,
35.83,
27.18
],
orientation: "h"
}
var trace4 = {
text: "sample length: 59",
hoveron: "points+kde",
meanline: {
visible: true
},
legendgroup: "M",
scalegroup: "M",
points: "all",
pointpos: -1.1,
box: {
visible: true
},
jitter: 0,
scalemode: "count",
marker: {
line: {
width: 2,
color: "#8dd3c7"
},
symbol: "line-ns"
},
showlegend: true,
side: "negative",
type: "violin",
name: "M",
span: [
0
],
line: {
color: "#8dd3c7"
},
y0: "Saturday",
x: [
20.65,
17.92,
39.42,
19.82,
17.81,
13.37,
12.69,
21.7,
9.55,
18.35,
17.78,
24.06,
16.31,
18.69,
31.27,
16.04,
38.01,
11.24,
48.27,
20.29,
13.81,
11.02,
18.29,
17.59,
20.08,
20.23,
15.01,
12.02,
10.51,
17.92,
15.36,
20.49,
25.21,
18.24,
14.0,
50.81,
15.81,
26.59,
38.73,
24.27,
30.06,
25.89,
48.33,
28.15,
11.59,
7.74,
20.45,
13.28,
24.01,
15.69,
11.61,
10.77,
15.53,
10.07,
12.6,
32.83,
29.03,
22.67,
17.82
],
orientation: "h"
}
var trace6 = {
text: "sample length: 18",
hoveron: "points+kde",
meanline: {
visible: true
},
legendgroup: "F",
scalegroup: "F",
points: "all",
pointpos: 0.45,
box: {
visible: true
},
jitter: 0,
scalemode: "count",
marker: {
line: {
width: 2,
color: "#bebada"
},
symbol: "line-ns"
},
showlegend: false,
side: "positive",
type: "violin",
name: "F",
span: [
0
],
line: {
color: "#bebada"
},
y0: "Sunday",
x: [
16.99,
24.59,
35.26,
14.83,
10.33,
16.97,
10.29,
34.81,
25.71,
17.31,
29.85,
25.0,
13.39,
16.21,
17.51,
9.6,
20.9,
18.15
],
orientation: "h"
}
var trace7 = {
text: "sample length: 58",
hoveron: "points+kde",
meanline: {
visible: true
},
legendgroup: "M",
scalegroup: "M",
points: "all",
pointpos: -0.9,
box: {
visible: true
},
jitter: 0,
scalemode: "count",
marker: {
line: {
width: 2,
color: "#8dd3c7"
},
symbol: "line-ns"
},
showlegend: false,
side: "negative",
type: "violin",
name: "M",
span: [
0
],
line: {
color: "#8dd3c7"
},
y0: "Sunday",
x: [
10.34,
21.01,
23.68,
25.29,
8.77,
26.88,
15.04,
14.78,
10.27,
15.42,
18.43,
21.58,
16.29,
17.46,
13.94,
9.68,
30.4,
18.29,
22.23,
32.4,
28.55,
18.04,
12.54,
9.94,
25.56,
19.49,
38.07,
23.95,
29.93,
14.07,
13.13,
17.26,
24.55,
19.77,
48.17,
16.49,
21.5,
12.66,
13.81,
24.52,
20.76,
31.71,
7.25,
31.85,
16.82,
32.9,
17.89,
14.48,
34.63,
34.65,
23.33,
45.35,
23.17,
40.55,
20.69,
30.46,
23.1,
15.69
],
orientation: "h"
}
var data = [trace1,trace2,trace3,trace4,trace5,trace6,trace7]
var layout = {
hovermode: "closest",
width: 400,
yaxis: {
showgrid: true
},
title: "Total bill distribution<br><i>scaled by number of bills per gender",
legend: {
tracegroupgap: 0
},
violingap: 0,
violingroupgap: 0,
violinmode: "overlay",
height: 700
}
Plotly.newPlot("myDiv", data, layout)