CanvasJS is a JavaScript charting library that can be used for creating dynamic and interactive charts. Although it doesn’t have a built-in rangeStepArea chart type, you can create it effectively you can replicate this effect by cleverly merging itsrangeArea and stepLine charts.
First, set up the basic HTML structure with a container for the chart:
<!DOCTYPE HTML>
<html>
<head>
<title>Range-Step Area Chart</title>
<script src="https://cdn.canvasjs.com/canvasjs.min.js"></script>
</head>
<body>
<div id="chartContainer" style="height: 370px; width: 100%;"></div>
<script>
//Chart Code Goes Here
</script>
</body>
</html>Next, add JavaScript code to define and render the chart. The rangeStepArea function will transform rangeStepArea data into rangeArea and stepLine charts.
var chart = new CanvasJS.Chart("chartContainer", {
theme: "light2",
title: {
text: "Range Step Area Chart"
},
toolTip: {
shared: true
},
data: [{
type: "rangeStepArea",
dataPoints: [
{ x: 10, y: [5, 10] },
{ x: 20, y: [4, 12] },
{ x: 30, y: [6, 20] },
{ x: 40, y: [10, 22] },
{ x: 50, y: [11, 12] },
{ x: 60, y: [11, 18] }
]
}]
});
rangeStepArea(chart);
chart.render();
function rangeStepArea(chart) {
for (var i = 0; i < chart.options.data.length; i++) {
var rangeDps = [], lowerBoundDps = [], upperBoundDps = [];
var data = chart.options.data;
if (data[i].type === "rangeStepArea") {
var dps = data[i].dataPoints;
for (var j = 0; j < dps.length; j++) {
if (j > 0)
rangeDps.push({ x: dps[j].x, y: dps[j - 1].y });
rangeDps.push({ x: dps[j].x, y: dps[j].y });
lowerBoundDps.push({ x: dps[j].x, y: dps[j].y[0] });
upperBoundDps.push({ x: dps[j].x, y: dps[j].y[1] });
}
data[i].type = "rangeArea";
data[i].dataPoints = rangeDps;
data[i].markerSize = 0;
data[i].toolTipContent = null;
data[i].highlightEnabled = false;
data.push({
type: "stepLine",
dataPoints: lowerBoundDps,
name: "Minimum",
color: "#6D78AD"
}, {
type: "stepLine",
dataPoints: upperBoundDps,
name: "Maximum",
color: "#6D78AD"
});
}
}
}The rangeStepArea function converts rangeStepArea data into a combination of rangeArea and stepLine charts. It processes the datapoints to create separate series for the range-area and the upper and lower bounds using step-line chart. This approach allows you to simulate a range-step area chart using the available chart types in CanvasJS.
JSFiddle: https://jsfiddle.net/vishwas_r/u0jgtv19/
