'How to edit y0 label style in Plotly js?
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)
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|