JSFiddle - React, Tailwind, and code Playground

by sridhar reddy

HTML

<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<div id="myDiv">
<script>
	function getrandom(num , mul)
{
  var value = [ ]
    for(i=0;i<=num;i++)
   {
     rand = Math.random() * mul;
     value.push(rand);
   }
    return value;
};

function get_update_data()
{
    var data = [
        {
          type: "scatterpolargl",
          r: [50],
          theta: [0],
          mode: "markers",
          name: "Wall Radius",
          marker: {
            color: "green",
            size: 10,
            line: {
              color: "white"
            },
            opacity: 1
          },
          cliponaxis: false
        },
        {
          type: "scatterpolargl",
          r: [0],
          theta: [0],
          mode: "markers",
          name: "Band",
          marker: {
            symbol: "circle-open",
            color: "red",
            sizemode: "radius",
            size: 160,
            line: {
            	width: 100,
              height: 20
            },
            opacity: 0.3
          },
          cliponaxis: true
        },
      ];
    return data;
};

var layout =
{
    title: "",
    font: {
        size: 15
    },
    polar: {
        bgcolor: "rgb(255, 255, 255)",
        angularaxis: {
            tickwidth: 2,
            linewidth: 3,
            color: "rgb(0,153,204)",
            layer: "below traces"
        },
        radialaxis: {
            side: "counterclockwise",
            showline: false,
            tickwidth: 0,
            showgrid: true,
            color: "rgb(0,153,204)",
            ticks: "",
            showticklabels: true,
        }
    },
    paper_bgcolor: "rgb(255,255,255)",
    autosize: false,
    width: 400,
    height: 400,
    margin: {
        l: 10,
        r: 10,
        b: 50,
        t: 50,
        pad: 4
    },
};

function get_update_layout()
{
    return layout;
};

Plotly.newPlot('myDiv', get_update_data(), layout);
</script>