Scatter Polar: Set Angularaxis From 0-100 (not 0-360)

plotly.js
1

I’m trying to plot some values on a Scatter Polar. All my values are from 0-100, but I want them plotted around the whole chart.

On the Scatter Polar but the angularaxis doesn’t accept a range value… I’ve tried range: [0,100] but that only seems to work for radialaxis.

Here’s what I have:

Screen Shot 2023-11-01 at 8.01.07 PM
Screen Shot 2023-11-01 at 8.01.07 PM752×680 62.4 KB

<!doctype html>
<html lang="en">
<head>
  <title> Colour Chart</title>
</head>
<body>
    <div id="chartContainer"></div>

    <script src="https://cdn.plot.ly/plotly-2.27.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: ["#dd3a3a", "#241fff", "#24723a"],
            symbol: "circle",
            size: 8
        },
        subplot: "polar"
        }
    ]

    var layout = {
        title: "Munsell Colour Chart",
        font: {
            size: 15
        },
        showlegend: false,
        polar: {
        bgcolor: "rgb(200, 200, 200)",  
        domain: {
            x: [0,1],
            y: [0,1]
        },
        /*sector: [0,100],*/
        radialaxis: {
            type: "linear",
            range: [0, 18],
            tick0: 0,
            tickfont: {
            size: 8
            },
            tickcolor: "#000000",
            color: "rgb(0,153,204)",
            tickwidth: 3,
            linewidth: 1,
            layer: "below traces",
        },
        angularaxis: {
            /*type: "category",
            period: 100,*/
            /*ticklabelstep: 1,
            tickmode: "array",
            ticktext: ["5R","10R","5YR","10YR","5Y","10Y","5GY","10GY","5G","10G","5BG","10BG","5B","10B","5PB","10PB","5P","10P","5RP","10RP"],
            tickvals: [5,10,15,20,25,30,35,40,45,50,55,60,65,70,75,80,85,90,95,100],
            */
            tickfont: {
            size: 8
            },
            rotation: 90,
            direction: "clockwise",
            showline: true,
            tickwidth: 2,
            showgrid: true,
            tickcolor: "#000000",
            color: "rgb(150,153,0)",
            ticks: "outside",
            showticklabels: true,
        }
        },
        paper_bgcolor: "rgb(225,225,225)",
        /*autosize: false,
        width: 400,
        height: 400,
        margin: {
            l: 10,
            r: 10,
            b: 50,
            t: 50,
            pad: 4
        },*/
    }

    Plotly.newPlot("chartContainer", data, layout)
    </script>
</body>
</html>```


Any help would be much appreciated!
2

Take a look here:

3

Thanks for the suggestion. I’ve looked at the documention but I couldn’t find anything.
I guess I just have to make a function to convert my 1-100 values to a 360 degree, so they plot around the circle. Not ideal but I can’t figure out another way.