Question

0

74

Views

How to Connect Plotly JS Radar Chart Lines?

I've been plotting Radar Charts in html using Plotly js, and am having a few issues.

<!doctype html>
<html lang="en-US">

<head>
    <meta charset="UTF-8">
    <script src="https://cdn.plot.ly/plotly-2.8.3.min.js"></script>
    <style>
      #radar {
        position: absolute;
      }
    </style>
</head>

<body>
    <div id="radar"></div>
    <script>
      WS = document.getElementById('radar')
      Plotly.newPlot( WS,
        [{
            type: 'scatterpolar',
            r: [35,20,20,20,30],
            theta: ["A", "B", "C", "D", "E"],
            fill: "none",
            name: "Band 1",
            line: {
              color: "red"
            }
        },{
            type: 'scatterpolar',
            r: [25,12,12,15,35],
            theta: ["A", "B", "C", "D", "E"],
            fill: "toself",
            name: "Band 2",
            line: {
              color: "blue"
            }
        }],
        {
          polar: {
            radialaxis: {
              showticklabels: false,
              range: [0, 40]
            }
          },
          margin: {t:0}
        }
      )
    </script>
</body>

</html>

My primary concern is being able to have the the final line connect between Variable E and A. In the examples Plotly provides, this seems to be the default behavior, but I can't figure out if I have added an option that disables this or if the distribution version of Plotly I'm using doesn't allow this. I'm using the exact version recommended by Plotly here.

I would also like to figure out a way to manipulate the label of each point from the current r & theta values to something like value & variable, please let me know if you have a solution for this.

Appreciate the help

7 months ago · Juan Pablo Isaza

1 answers

Answer question

0

Answer question

Find remote jobs

Accepted Answer · 2022-07-05T09:55:35.300Z

I have solved both of my questions with the following edits:

To make the final connection between the first and last point, we append the coordinates of the first point to the end of 'r' and 'theta' elements. So,

r: [35,20,20,20,30],
theta: ["A", "B", "C", "D", "E"]

becomes

r: [35,20,20,20,30,35],
theta: ["A", "B", "C", "D", "E", "A"]

To change the hover label of theta and r, we use the hovertemplate element. So, add in the line:

hovertemplate: 'Variable: %{theta}, Value: %{r}'

The final product:

<!doctype html>
<html lang="en-US">

<head>
    <meta charset="UTF-8">
    <script src="https://cdn.plot.ly/plotly-2.8.3.min.js"></script>
    <style>
      #radar {
        position: absolute;
      }
    </style>
</head>

<body>
    <div id="radar"></div>
    <script>
      WS = document.getElementById('radar')
      Plotly.newPlot( WS,
        [{
            type: 'scatterpolar',
            r: [35,20,20,20,30, 35],
            theta: ["A", "B", "C", "D", "E", "A"],
            fill: "none",
            name: "Band 1",
            line: {
              color: "red"
            },
            hovertemplate: 'Variable: %{theta}, Value: %{r}'
        },{
            type: 'scatterpolar',
            r: [25,12,12,15,35,25],
            theta: ["A", "B", "C", "D", "E", "A"],
            fill: "toself",
            name: "Band 2",
            line: {
              color: "blue"
            },
            hovertemplate: 'Variable: %{theta}, Value: %{r}'
        }],
        {
          polar: {
            radialaxis: {
              showticklabels: false,
              range: [0, 40]
            }
          },
          margin: {t:0}
        }
      )
    </script>
</body>

</html>