Radar
Radar displays continuous data across n-number of categories (rows) and n-number of series (columns).
<div id="placeholder" style="height:400px">
</div>
<script type="module">
import { Radar } from "@hpcc-js/chart";
new Radar()
.target("placeholder")
.columns(["Category", "Value"])
.data([
["A", 34],
["B", 55],
["C", 89],
["D", 144]
])
.render()
;
</script>
fontFamily and fontSize can be used to control the font family and size used for the labels and guidelines.
pointShape and pointSize can be used to control the shape and size of the data points.
<div id="placeholder" style="height:400px">
</div>
<script type="module">
import { Radar } from "@hpcc-js/chart";
new Radar()
.target("placeholder")
.columns(["Hour", "Value"])
.data([
["Dec", 134],
["Jan", 95],
["Feb", 80],
["Mar", 65],
["Apr", 59],
["May", 51],
["Jun", 58],
["Jul", 72],
["Aug", 79],
["Sep", 104],
["Oct", 134],
["Nov", 124]
])
.fontFamily("Verdana")
.fontSize(14)
.pointShape("circle")
.pointSize(3)
.render()
;
</script>
fillOpacity can be used to control the opacity of the background color created by each series.
valueGuideRatios can be used to control placement, and count, of the guide lines.
labelPaddingRatio shrinks the chart's visible area between its column labels.
<div id="placeholder" style="height:400px">
</div>
<script type="module">
import { Radar } from "@hpcc-js/chart";
new Radar()
.target("placeholder")
.columns(["Category", "Value 1", "Value 2"])
.data([
["A", 34, 190],
["B", 55, 150],
["C", 89, 35],
["D", 144, 36]
])
.valueGuideRatios([0.5, 1.0])
.labelPaddingRatio(0.8)
.render()
;
</script>
API
Published Properties