Scatter Polar changing units and custom colours

plotly.js
1

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:

Pllotly - Change units and add color to points
Pllotly - Change units and add color to points1704×882 135 KB

  • 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

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>
2

Hi @cupofjoe welcome to the forums.

Concerning the colors: Try using list of colors to your marker_color:

3

That’s great! Now I just have to figure out the Axis units…