Area
Area, Line, Step and Scatter serve a similar purpose. They display continuous data along a categorical or continuous axis.
<div id="placeholder" style="height:400px">
</div>
<script type="module">
import { Area } from "@hpcc-js/chart";
new Area()
.target("placeholder")
.columns(["Category", "Value"])
.data([
["A", 34],
["B", 55],
["C", 89],
["D", 144]
])
.render()
;
</script>
Area supports n-number of numeric values per data row. A series is created for each column as needed.
<div id="placeholder" style="height:400px">
</div>
<script type="module">
import { Area } from "@hpcc-js/chart";
new Area()
.target("placeholder")
.columns(["Category", "Value 1", "Value 2", "Value 3"])
.data([
["A", 34, 90, 82],
["B", 55, 50, 65],
["C", 89, 75, 43],
["D", 144, 66, 56]
])
.render()
;
</script>
pointShape can be used to specify the shape of each data point (see the property list below for potential values).
pointSize can be used to set the size of each data point's shape.
showValue specifies whether or not to display the value above each data point.
yAxisDomainPadding can be used to reserve a percentage of the top and bottom edges for white space.
<div id="placeholder" style="height:400px">
</div>
<script type="module">
import { Area } from "@hpcc-js/chart";
new Area()
.target("placeholder")
.columns(["Category", "Value", "Value 2"])
.data([
["A", 34, 350],
["B", 55, 380],
["C", 89, 390],
["D", 98, 410]
])
.pointShape("circle")
.pointSize(2)
.showValue(true)
.yAxisDomainPadding(10)
.render()
;
</script>
interpolate can be used to specify which line interpolation mode is used to draw the connecting line between data points (see the property list below for potential values).
pointDarken can be set to 'false' to disable the slight darkening effect applied to each data point.
showValue along with valueBaseline("central") places the values at the center of each data point.
xAxisDomainPadding can be used to reserve a percentage of the left and right edges for white space.
<div id="placeholder" style="height:400px">
</div>
<script type="module">
import { Area } from "@hpcc-js/chart";
new Area()
.target("placeholder")
.columns(["Value 1", "Value 2"])
.data([
[144, 90],
[89, 50],
[55, 75],
[34, 66]
])
.paletteID("FlatUI_German")
.xAxisType("linear")
.pointShape("rectangle")
.pointSize(20)
.pointDarken(false)
.showValue(true)
.valueBaseline("central")
.xAxisDomainPadding(5)
.render()
;
</script>
For documentation on axis-specific properties, like those used in the below example, take a look at the Axis Documentation.
<div id="placeholder" style="height:400px">
</div>
<script type="module">
import { Area } from "@hpcc-js/chart";
new Area()
.target("placeholder")
.columns(["Value 1", "Value 2"])
.data([
[144, 90],
[89, 50],
[55, 75],
[34, 66]
])
.xAxisType("linear")
.xAxisTitle("X-Axis Title")
.yAxisTitle("Y-Axis Title")
.xAxisTickCount(30)
.xAxisOverlapMode("rotate")
.xAxisLabelRotation(90)
.pointShape("circle")
.render()
;
</script>
API
Published Properties