I'm trying to plot some colours on a scatter polar chart in Plotly, using Javascript only. I can't seem to figure out how to change the scale, or add individual colors to my points.
Here's what I'm trying to do
1. Fix units:
- Angular axis units from 0 to 100
- Angular axis straight up (north) starts at 0
- Angular axis show ticks every 5 units = every 18 degrees
- Radial axis units from 0 to 18
**2. Individual Colors for the plot circle of each value
- Cadmium red = #dd3a3a
- Cobalt blue = #241fff
- Viridian = #24723a
<!doctype html>
<html lang="en">
<head>
<title> Colour Chart</title>
</head>
<body>
<div id="chartContainer"></div>
<script src="js/plotly-2.26.0.min.js" charset="utf-8"></script>
<script>
var data = [
{
type: "scatterpolar",
mode: "markers+text",
r: [16,12,4],
theta: [7.5,76.25,57.5],
text: ["Cadmium Red", "Cobalt Blue", "Viridian"],
textposition: "right",
line: {
color: "#ff66ab"
},
marker: {
color: "#000000",
symbol: "circle",
size: 8
},
subplot: "polar"
}
]
var layout = {
showlegend: false,
polar: {
domain: {
x: [0,1],
y: [0,1]
},
radialaxis: {
tickfont: {
size: 8
}
},
angularaxis: {
tickfont: {
size: 8
},
rotation: 90,
direction: "counterclockwise"
}
}
}
Plotly.newPlot("chartContainer", data, layout)
</script>
</body>
</html>
I've looked at the documentation but I can't seem to figure it out.