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