How do you change the legend and polar axis (0, 45, 90 etc) foreground color to white when the background is black.
var data = [
{
type: "scatterpolar",
mode: "lines+markers",
r: [.302, .098],
theta: [13,106],
line: {
color: "#ff66ab"
},
marker: {
color: "#8090c7",
symbol: "square",
size: 8
}
},
{
type: "scatterpolar",
mode: "lines+markers",
r: [.39, .102],
theta: [159, 168],
line: {
color: 'black'
},
marker: {
color: "red",
symbol: "circle",
size: 8
}
}
]
var layout = {
showlegend: true,
polar: {
radialaxis: {
tickfont: {
size: 8
}
},
angularaxis: {
tickfont: {
size: 8
},
rotation: 90,
direction: "clockwise"
}
},
plot_bgcolor: 'black',
paper_bgcolor: 'black'
}
Plotly.newPlot('myDiv', data, layout)<head>
<!-- Load plotly.js into the DOM -->
<script src='https://cdn.plot.ly/plotly-2.9.0.min.js'></script>
</head>
<body>
<div id='myDiv'><!-- Plotly chart will be drawn inside this DIV --></div>
</body>You can set layout.legend.font.color = 'white' and layout.polar.angularaxis.color = 'white'.
var data = [
{
type: "scatterpolar",
mode: "lines+markers",
r: [.302, .098],
theta: [13,106],
line: {
color: "#ff66ab"
},
marker: {
color: "#8090c7",
symbol: "square",
size: 8
}
},
{
type: "scatterpolar",
mode: "lines+markers",
r: [.39, .102],
theta: [159, 168],
line: {
color: 'black'
},
marker: {
color: "red",
symbol: "circle",
size: 8
}
}
]
var layout = {
showlegend: true,
legend: {
font: {
color: 'white'
}
},
polar: {
radialaxis: {
tickfont: {
size: 8
}
},
angularaxis: {
color: 'white',
tickfont: {
size: 8
},
rotation: 90,
direction: "clockwise"
}
},
plot_bgcolor: 'black',
paper_bgcolor: 'black'
}
Plotly.newPlot('myDiv', data, layout)<head>
<!-- Load plotly.js into the DOM -->
<script src='https://cdn.plot.ly/plotly-2.9.0.min.js'></script>
</head>
<body>
<div id='myDiv'><!-- Plotly chart will be drawn inside this DIV --></div>
</body>