- Chart Gallery
- Range Charts
- Range Step-Area Chart
Range Step-Area Chart
{
"chart": {
"zIndex": 0,
"enabled": true,
"type": "area",
"title": {
"zIndex": 80,
"enabled": true,
"maxLength": null,
"fontSize": 14,
"fontFamily": "\"Lucida Console\", Monaco, monospace",
"fontColor": "#b0bec5",
"fontOpacity": 1,
"fontDecoration": "none",
"fontStyle": "normal",
"fontVariant": "normal",
"fontWeight": "normal",
"letterSpacing": "normal",
"textDirection": "ltr",
"textShadow": "none",
"lineHeight": "normal",
"textIndent": 0,
"vAlign": "top",
"hAlign": "center",
"wordWrap": "normal",
"wordBreak": "normal",
"textOverflow": "",
"selectable": false,
"disablePointerEvents": false,
"useHtml": false,
"width": null,
"height": null,
"align": "center",
"text": "Min and Max Connection Timeout",
"margin": {
"left": 0,
"top": 0,
"bottom": 0,
"right": 0
},
"padding": {
"left": 0,
"top": 0,
"bottom": 10,
"right": 0
},
"background": {
"zIndex": 0,
"enabled": false
}
},
"background": {
"zIndex": 0.5,
"enabled": true
},
"tooltip": {
"enabled": true,
"title": {
"zIndex": 1,
"enabled": true,
"maxLength": null,
"fontSize": 14,
"fontFamily": "\"Lucida Console\", Monaco, monospace",
"fontColor": "#90a4ae",
"fontOpacity": 1,
"fontDecoration": "none",
"fontStyle": "normal",
"fontVariant": "normal",
"fontWeight": "normal",
"letterSpacing": "normal",
"textDirection": "ltr",
"textShadow": "none",
"lineHeight": "normal",
"textIndent": 0,
"vAlign": "top",
"hAlign": "left",
"wordWrap": "normal",
"wordBreak": "normal",
"textOverflow": "",
"selectable": false,
"disablePointerEvents": false,
"useHtml": false,
"width": null,
"height": null,
"align": "center",
"orientation": "top",
"rotation": 0,
"text": "",
"margin": {
"left": 0,
"top": 0,
"bottom": 0,
"right": 0
},
"padding": {
"left": 0,
"top": 0,
"bottom": 0,
"right": 0
},
"background": {
"enabled": false
}
},
"separator": {
"zIndex": 1,
"enabled": true,
"fill": "#546e7a",
"stroke": "none",
"width": "100%",
"height": 1,
"orientation": "top",
"margin": {
"left": 10,
"top": 10,
"bottom": 10,
"right": 10
}
},
"background": {
"zIndex": 0,
"enabled": true
}
},
"margin": {
"left": 0,
"top": 0,
"bottom": 0,
"right": 0
},
"padding": {
"left": 15,
"top": 20,
"bottom": 15,
"right": 25
},
"a11y": {
"enabled": true,
"mode": "chart-elements"
},
"autoRedraw": true,
"bounds": {},
"contextMenu": {
"enabled": true
},
"credits": {
"text": "AnyChart",
"url": "https://www.anychart.com/?utm_source=registered",
"alt": "AnyChart - JavaScript Charts designed to be embedded and integrated{{anychart-version}}",
"imgAlt": "AnyChart - JavaScript Charts",
"logoSrc": "https://static.anychart.com/logo.png",
"enabled": false
},
"selectRectangleMarqueeFill": {
"color": "#d3d3d3",
"opacity": 0.4
},
"selectRectangleMarqueeStroke": "#d3d3d3",
"legend": {
"zIndex": 200,
"enabled": false,
"fontSize": 12,
"fontFamily": "\"Lucida Console\", Monaco, monospace",
"fontColor": "#b0bec5",
"fontOpacity": 1,
"fontDecoration": "none",
"fontStyle": "normal",
"fontVariant": "normal",
"fontWeight": "normal",
"letterSpacing": "normal",
"textDirection": "ltr",
"textShadow": "none",
"lineHeight": "normal",
"textIndent": 0,
"vAlign": "bottom",
"hAlign": "start",
"wordWrap": "normal",
"wordBreak": "normal",
"textOverflow": "...",
"selectable": false,
"disablePointerEvents": false,
"useHtml": false,
"inverted": false,
"itemsLayout": "horizontal",
"iconSize": 15,
"width": null,
"height": null,
"maxWidth": null,
"maxHeight": null,
"position": "top",
"positionMode": "outside",
"drag": false,
"itemsFormat": null,
"titleFormat": null,
"itemsHAlign": "left",
"itemsSpacing": 15,
"itemsSourceMode": "default",
"hoverCursor": "pointer",
"iconTextSpacing": 5,
"align": "center",
"margin": {
"left": 0,
"top": 0,
"bottom": 0,
"right": 0
},
"padding": {
"left": 10,
"top": 0,
"bottom": 10,
"right": 10
},
"background": {
"enabled": false
},
"title": {
"enabled": false,
"maxLength": null,
"fontSize": 15,
"fontFamily": "\"Lucida Console\", Monaco, monospace",
"fontColor": "#b0bec5",
"fontOpacity": 1,
"fontDecoration": "none",
"fontStyle": "normal",
"fontVariant": "normal",
"fontWeight": "normal",
"letterSpacing": "normal",
"textDirection": "ltr",
"textShadow": "none",
"lineHeight": "normal",
"textIndent": 0,
"vAlign": "top",
"hAlign": "center",
"wordWrap": "normal",
"wordBreak": "normal",
"textOverflow": "",
"selectable": false,
"disablePointerEvents": false,
"useHtml": false,
"width": null,
"height": null,
"align": "center",
"text": "Title text",
"margin": {
"left": 0,
"top": 0,
"bottom": 0,
"right": 0
},
"padding": {
"left": 0,
"top": 0,
"bottom": 0,
"right": 0
},
"background": {
"enabled": false
}
},
"titleSeparator": {
"zIndex": 1,
"enabled": false,
"fill": "#546e7a",
"stroke": "none",
"width": "100%",
"height": 1,
"orientation": "top",
"margin": {
"left": 0,
"top": 5,
"bottom": 5,
"right": 0
}
},
"paginator": {
"zIndex": 30,
"enabled": true,
"fontSize": 12,
"fontFamily": "\"Lucida Console\", Monaco, monospace",
"fontColor": "#b0bec5",
"fontOpacity": 1,
"fontDecoration": "none",
"fontStyle": "normal",
"fontVariant": "normal",
"fontWeight": "normal",
"letterSpacing": "normal",
"textDirection": "ltr",
"textShadow": "none",
"lineHeight": "normal",
"textIndent": 0,
"vAlign": "top",
"hAlign": "start",
"wordWrap": "normal",
"wordBreak": "normal",
"textOverflow": "",
"selectable": false,
"disablePointerEvents": false,
"useHtml": false,
"orientation": "right",
"layout": "horizontal",
"background": {
"enabled": false
},
"padding": {
"left": 5,
"top": 0,
"bottom": 0,
"right": 0
},
"margin": {
"left": 0,
"top": 0,
"bottom": 0,
"right": 0
}
},
"tooltip": {
"enabled": false,
"title": {
"zIndex": 1,
"enabled": false,
"maxLength": null,
"fontSize": 14,
"fontFamily": "\"Lucida Console\", Monaco, monospace",
"fontColor": "#90a4ae",
"fontOpacity": 1,
"fontDecoration": "none",
"fontStyle": "normal",
"fontVariant": "normal",
"fontWeight": "normal",
"letterSpacing": "normal",
"textDirection": "ltr",
"textShadow": "none",
"lineHeight": "normal",
"textIndent": 0,
"vAlign": "top",
"hAlign": "left",
"wordWrap": "normal",
"wordBreak": "normal",
"textOverflow": "",
"selectable": false,
"disablePointerEvents": false,
"useHtml": false,
"width": null,
"height": null,
"align": "center",
"orientation": "top",
"rotation": 0,
"text": "",
"margin": {
"left": 0,
"top": 0,
"bottom": 0,
"right": 0
},
"padding": {
"left": 0,
"top": 0,
"bottom": 0,
"right": 0
},
"background": {
"enabled": false
}
},
"separator": {
"zIndex": 1,
"enabled": false,
"fill": "#546e7a",
"stroke": "none",
"width": "100%",
"height": 1,
"orientation": "top",
"margin": {
"left": 10,
"top": 10,
"bottom": 10,
"right": 10
}
},
"background": {
"zIndex": 0,
"enabled": true
}
}
},
"interactivity": {
"spotRadius": 2,
"multiSelectOnClick": false,
"unselectOnClickOutOfPoint": true,
"hoverMode": "by-x",
"selectionMode": "multi-select"
},
"defaultSeriesType": "area",
"maxBubbleSize": "20%",
"minBubbleSize": "5%",
"maxPointWidth": "100%",
"minPointLength": 0,
"baseline": 0,
"palette": {
"type": "distinct",
"items": [
"#40c4ff",
"#0288d1",
"#9fa8da",
"#5c6bc0",
"#7e57c2",
"#54dbdf",
"#15a9c7",
"#00897b",
"#304ffe",
"#0179be"
]
},
"markerPalette": {
"items": [
"circle",
"diamond",
"square",
"triangle-down",
"triangle-up",
"diagonal-cross",
"pentagon",
"cross",
"v-line",
"star5",
"star4",
"trapezium",
"star7",
"star6",
"star10"
]
},
"hatchFillPalette": {
"items": [
{
"type": "backward-diagonal",
"color": "black 0.5",
"thickness": 1,
"size": 10
},
{
"type": "forward-diagonal",
"color": "black 0.5",
"thickness": 1,
"size": 10
},
{
"type": "horizontal",
"color": "black 0.5",
"thickness": 1,
"size": 10
},
{
"type": "vertical",
"color": "black 0.5",
"thickness": 1,
"size": 10
},
{
"type": "dashed-backward-diagonal",
"color": "black 0.5",
"thickness": 1,
"size": 10
},
{
"type": "grid",
"color": "black 0.5",
"thickness": 1,
"size": 10
},
{
"type": "dashed-forward-diagonal",
"color": "black 0.5",
"thickness": 1,
"size": 10
},
{
"type": "dashed-horizontal",
"color": "black 0.5",
"thickness": 1,
"size": 10
},
{
"type": "dashed-vertical",
"color": "black 0.5",
"thickness": 1,
"size": 10
},
{
"type": "diagonal-cross",
"color": "black 0.5",
"thickness": 1,
"size": 10
},
{
"type": "diagonal-brick",
"color": "black 0.5",
"thickness": 1,
"size": 10
},
{
"type": "divot",
"color": "black 0.5",
"thickness": 1,
"size": 10
},
{
"type": "horizontal-brick",
"color": "black 0.5",
"thickness": 1,
"size": 10
},
{
"type": "vertical-brick",
"color": "black 0.5",
"thickness": 1,
"size": 10
},
{
"type": "checker-board",
"color": "black 0.5",
"thickness": 1,
"size": 10
},
{
"type": "confetti",
"color": "black 0.5",
"thickness": 1,
"size": 10
},
{
"type": "plaid",
"color": "black 0.5",
"thickness": 1,
"size": 10
},
{
"type": "solid-diamond",
"color": "black 0.5",
"thickness": 1,
"size": 10
},
{
"type": "zig-zag",
"color": "black 0.5",
"thickness": 1,
"size": 10
},
{
"type": "weave",
"color": "black 0.5",
"thickness": 1,
"size": 10
},
{
"type": "percent-05",
"color": "black 0.5",
"thickness": 1,
"size": 10
},
{
"type": "percent-10",
"color": "black 0.5",
"thickness": 1,
"size": 10
},
{
"type": "percent-20",
"color": "black 0.5",
"thickness": 1,
"size": 10
},
{
"type": "percent-25",
"color": "black 0.5",
"thickness": 1,
"size": 10
},
{
"type": "percent-30",
"color": "black 0.5",
"thickness": 1,
"size": 10
},
{
"type": "percent-40",
"color": "black 0.5",
"thickness": 1,
"size": 10
},
{
"type": "percent-50",
"color": "black 0.5",
"thickness": 1,
"size": 10
},
{
"type": "percent-60",
"color": "black 0.5",
"thickness": 1,
"size": 10
},
{
"type": "percent-70",
"color": "black 0.5",
"thickness": 1,
"size": 10
},
{
"type": "percent-75",
"color": "black 0.5",
"thickness": 1,
"size": 10
},
{
"type": "percent-80",
"color": "black 0.5",
"thickness": 1,
"size": 10
},
{
"type": "percent-90",
"color": "black 0.5",
"thickness": 1,
"size": 10
}
]
},
"normal": {
"labels": {
"enabled": false
},
"minLabels": {
"enabled": null
},
"maxLabels": {
"enabled": null
}
},
"hovered": {
"labels": {
"enabled": null
},
"minLabels": {
"enabled": null
},
"maxLabels": {
"enabled": null
}
},
"selected": {
"labels": {
"enabled": null
},
"minLabels": {
"enabled": null
},
"maxLabels": {
"enabled": null
}
},
"barGroupsPadding": 0.8,
"barsPadding": 0.4,
"xScale": 0,
"yScale": 1,
"series": [
{
"enabled": true,
"seriesType": "range-step-area",
"clip": true,
"legendItem": {
"enabled": true,
"iconStroke": "none"
},
"color": null,
"connectMissingPoints": false,
"stepDirection": "center",
"isVertical": null,
"normal": {
"stroke": "none",
"hatchFill": "none",
"risingHatchFill": "none",
"fallingHatchFill": "none",
"labels": {
"enabled": null
},
"minLabels": {
"enabled": null
},
"maxLabels": {
"enabled": null
},
"markers": {
"enabled": false,
"disablePointerEvents": false,
"position": "high",
"anchor": "center",
"offsetX": 0,
"offsetY": 0,
"rotation": 0,
"size": 4
},
"outlierMarkers": {
"enabled": null,
"anchor": "center",
"offsetX": 0,
"offsetY": 0,
"rotation": 0,
"size": 6
}
},
"hovered": {
"hatchFill": "none",
"risingHatchFill": "none",
"fallingHatchFill": "none",
"labels": {
"enabled": null
},
"minLabels": {
"enabled": null
},
"maxLabels": {
"enabled": null
},
"markers": {
"enabled": false,
"size": 6
},
"outlierMarkers": {
"enabled": null,
"anchor": "center",
"offsetX": 0,
"offsetY": 0,
"rotation": 0,
"size": 6
}
},
"selected": {
"fill": {
"color": "#333",
"opacity": 0.85
},
"negativeFill": {
"color": "#333",
"opacity": 0.85
},
"risingFill": {
"color": "#333",
"opacity": 0.85
},
"fallingFill": {
"color": "#333",
"opacity": 0.85
},
"stroke": {
"color": "#878f96",
"thickness": 3
},
"lowStroke": {
"color": "#333",
"opacity": 0.85
},
"highStroke": {
"color": "#333",
"opacity": 0.85
},
"lowFill": {
"color": "#333",
"opacity": 0.85
},
"highFill": {
"color": "#333",
"opacity": 0.85
},
"negativeStroke": {
"color": "#333",
"opacity": 0.85
},
"risingStroke": {
"color": "#333",
"opacity": 0.85
},
"fallingStroke": {
"color": "#333",
"opacity": 0.85
},
"hatchFill": "none",
"risingHatchFill": "none",
"fallingHatchFill": "none",
"labels": {
"enabled": null
},
"minLabels": {
"enabled": null
},
"maxLabels": {
"enabled": null
},
"markers": {
"enabled": false,
"size": 6
},
"outlierMarkers": {
"enabled": null,
"anchor": "center",
"offsetX": 0,
"offsetY": 0,
"rotation": 0,
"size": 6
}
},
"a11y": {
"enabled": false,
"titleFormat": "Series named {%SeriesName} with {%SeriesPointsCount} points. Min value is {%SeriesYMin}, max value is {%SeriesYMax}"
},
"xMode": "ordinal",
"data": [
{
"x": "0",
"low": 232,
"high": 542
},
{
"x": "1",
"low": 393,
"high": 522
},
{
"x": "2",
"low": 368,
"high": 602
},
{
"x": "3",
"low": 419,
"high": 612
},
{
"x": "4",
"low": 194,
"high": 1052
},
{
"x": "5",
"low": 379,
"high": 639
},
{
"x": "6",
"low": 332,
"high": 712
},
{
"x": "7",
"low": 457,
"high": 622
},
{
"x": "8",
"low": 493,
"high": 692
},
{
"x": "9",
"low": 468,
"high": 802
},
{
"x": "10",
"low": 419,
"high": 612
},
{
"x": "11",
"low": 194,
"high": 1052
},
{
"x": "12",
"low": 579,
"high": 839
},
{
"x": "13",
"low": 532,
"high": 812
},
{
"x": "14",
"low": 579,
"high": 839
},
{
"x": "15",
"low": 532,
"high": 812
},
{
"x": "16",
"low": 557,
"high": 922
},
{
"x": "17",
"low": 593,
"high": 822
},
{
"x": "18",
"low": 668,
"high": 902
},
{
"x": "19",
"low": 619,
"high": 712
},
{
"x": "20",
"low": 694,
"high": 952
},
{
"x": "21",
"low": 679,
"high": 1039
},
{
"x": "22",
"low": 632,
"high": 912
},
{
"x": "23",
"low": 432,
"high": 712
}
],
"xScale": 0,
"yScale": 1
}
],
"isVertical": false,
"xAxes": [
{
"enabled": true,
"width": null,
"drawFirstLabel": true,
"drawLastLabel": true,
"overlapMode": "no-overlap",
"stroke": "#546e7a",
"staggerMode": false,
"staggerMaxLines": 2,
"staggerLines": null,
"orientation": "bottom",
"value": null,
"title": {
"zIndex": 35,
"enabled": true,
"maxLength": null,
"fontSize": 13,
"fontFamily": "\"Lucida Console\", Monaco, monospace",
"fontColor": "#545f69",
"fontOpacity": 1,
"fontDecoration": "none",
"fontStyle": "normal",
"fontVariant": "normal",
"fontWeight": "normal",
"letterSpacing": "normal",
"textDirection": "ltr",
"textShadow": "none",
"lineHeight": "normal",
"textIndent": 0,
"vAlign": "top",
"hAlign": "center",
"wordWrap": "normal",
"wordBreak": "normal",
"textOverflow": "",
"selectable": false,
"disablePointerEvents": false,
"useHtml": false,
"width": null,
"height": null,
"align": "center",
"text": "Day hours",
"margin": {
"left": 0,
"top": 0,
"bottom": 0,
"right": 0
},
"padding": {
"left": 0,
"top": 5,
"bottom": 0,
"right": 0
},
"background": {
"enabled": false
}
},
"labels": {
"zIndex": 35,
"enabled": true
},
"minorLabels": {
"zIndex": 35,
"enabled": false
},
"ticks": {
"zIndex": 35,
"enabled": true,
"stroke": "#546e7a",
"length": 6,
"position": "outside"
},
"minorTicks": {
"zIndex": 35,
"enabled": false,
"stroke": "#455a64",
"length": 4,
"position": "outside"
},
"scale": 0
}
],
"yAxes": [
{
"enabled": true,
"width": null,
"drawFirstLabel": true,
"drawLastLabel": true,
"overlapMode": "no-overlap",
"stroke": "#546e7a",
"staggerMode": false,
"staggerMaxLines": 2,
"staggerLines": null,
"orientation": "left",
"value": null,
"title": {
"zIndex": 35,
"enabled": true,
"maxLength": null,
"fontSize": 13,
"fontFamily": "\"Lucida Console\", Monaco, monospace",
"fontColor": "#545f69",
"fontOpacity": 1,
"fontDecoration": "none",
"fontStyle": "normal",
"fontVariant": "normal",
"fontWeight": "normal",
"letterSpacing": "normal",
"textDirection": "ltr",
"textShadow": "none",
"lineHeight": "normal",
"textIndent": 0,
"vAlign": "top",
"hAlign": "center",
"wordWrap": "normal",
"wordBreak": "normal",
"textOverflow": "",
"selectable": false,
"disablePointerEvents": false,
"useHtml": false,
"width": null,
"height": null,
"align": "center",
"text": "ms",
"margin": {
"left": 0,
"top": 0,
"bottom": 0,
"right": 0
},
"padding": {
"left": 0,
"top": 0,
"bottom": 5,
"right": 0
},
"background": {
"enabled": false
}
},
"labels": {
"zIndex": 35,
"enabled": true
},
"minorLabels": {
"zIndex": 35,
"enabled": false
},
"ticks": {
"zIndex": 35,
"enabled": true,
"stroke": "#546e7a",
"length": 6,
"position": "outside"
},
"minorTicks": {
"zIndex": 35,
"enabled": false,
"stroke": "#455a64",
"length": 4,
"position": "outside"
},
"scale": 1
}
],
"crosshair": {
"zIndex": 41,
"enabled": false,
"xStroke": "#969EA5",
"yStroke": "#969EA5",
"displayMode": "float",
"xLabels": [
{
"enabled": true,
"fontSize": 12,
"fontFamily": "\"Lucida Console\", Monaco, monospace",
"fontColor": "#ffffff",
"fontOpacity": 1,
"fontDecoration": "none",
"fontStyle": "normal",
"fontVariant": "normal",
"fontWeight": 400,
"letterSpacing": "normal",
"textDirection": "ltr",
"textShadow": "none",
"lineHeight": "normal",
"textIndent": 0,
"vAlign": "top",
"hAlign": "start",
"wordWrap": "normal",
"wordBreak": "normal",
"textOverflow": "",
"selectable": false,
"disablePointerEvents": true,
"useHtml": false,
"text": "Label text",
"width": null,
"height": null,
"anchor": null,
"offsetX": 0,
"offsetY": 0,
"rotation": 0,
"adjustFontSize": {
"width": false,
"height": false
},
"minFontSize": 8,
"maxFontSize": 16,
"background": {
"zIndex": 0,
"enabled": true
},
"padding": {
"left": 10,
"top": 5,
"bottom": 5,
"right": 10
},
"axisIndex": 0
}
],
"yLabels": [
{
"enabled": true,
"fontSize": 12,
"fontFamily": "\"Lucida Console\", Monaco, monospace",
"fontColor": "#ffffff",
"fontOpacity": 1,
"fontDecoration": "none",
"fontStyle": "normal",
"fontVariant": "normal",
"fontWeight": 400,
"letterSpacing": "normal",
"textDirection": "ltr",
"textShadow": "none",
"lineHeight": "normal",
"textIndent": 0,
"vAlign": "top",
"hAlign": "start",
"wordWrap": "normal",
"wordBreak": "normal",
"textOverflow": "",
"selectable": false,
"disablePointerEvents": true,
"useHtml": false,
"text": "Label text",
"width": null,
"height": null,
"anchor": null,
"offsetX": 0,
"offsetY": 0,
"rotation": 0,
"adjustFontSize": {
"width": false,
"height": false
},
"minFontSize": 8,
"maxFontSize": 16,
"background": {
"zIndex": 0,
"enabled": true
},
"padding": {
"left": 10,
"top": 5,
"bottom": 5,
"right": 10
},
"axisIndex": 0
}
]
},
"scales": [
{
"type": "ordinal",
"inverted": false,
"ticks": {
"maxCount": 100
},
"mode": "discrete"
},
{
"type": "linear",
"inverted": false,
"maximum": null,
"minimum": null,
"minimumGap": 0.1,
"maximumGap": 0.1,
"softMinimum": null,
"softMaximum": null,
"alignMinimum": true,
"alignMaximum": true,
"maxTicksCount": 1000,
"ticks": {
"mode": "linear",
"base": 0,
"allowFractional": true,
"minCount": 4,
"maxCount": 6
},
"minorTicks": {
"mode": "linear",
"base": 0,
"allowFractional": true,
"count": 5
},
"stackMode": "none",
"stackDirection": "direct",
"stickToZero": true,
"comparisonMode": "none"
}
],
"crossing": {
"stroke": "none"
},
"quarters": {},
"yCrossAxes": [
0
],
"xCrossAxes": [
0
],
"xScroller": {
"zIndex": 35,
"enabled": false,
"height": 16,
"minHeight": null,
"maxHeight": null,
"orientation": "bottom",
"inverted": false,
"autoHide": false,
"fill": "#455a64",
"selectedFill": "#546e7a",
"outlineStroke": "none",
"allowRangeChange": true,
"thumbs": {
"normal": {
"fill": "#E9E9E9",
"stroke": "#7c868e"
},
"hovered": {
"fill": "#90a4ae",
"stroke": "#546e7a"
},
"enabled": true,
"autoHide": false
},
"position": "after-axes"
},
"yScroller": {
"zIndex": 35,
"enabled": false,
"height": 16,
"minHeight": null,
"maxHeight": null,
"orientation": "left",
"inverted": false,
"autoHide": false,
"fill": "#455a64",
"selectedFill": "#546e7a",
"outlineStroke": "none",
"allowRangeChange": true,
"thumbs": {
"normal": {
"fill": "#E9E9E9",
"stroke": "#7c868e"
},
"hovered": {
"fill": "#90a4ae",
"stroke": "#546e7a"
},
"enabled": true,
"autoHide": false
},
"position": "after-axes"
},
"xZoom": {
"startRatio": 0,
"endRatio": 1,
"continuous": true
},
"yZoom": {
"startRatio": 0,
"endRatio": 1,
"continuous": true
}
}
}
<html>
<head>
<script src="https://cdn.anychart.com/releases/v8/js/anychart-base.min.js"></script>
<script src="https://cdn.anychart.com/releases/v8/js/anychart-ui.min.js"></script>
<script src="https://cdn.anychart.com/releases/v8/js/anychart-exports.min.js"></script>
<script src="https://cdn.anychart.com/releases/v8/themes/dark_blue.min.js"></script>
<link href="https://cdn.anychart.com/releases/v8/css/anychart-ui.min.css" type="text/css" rel="stylesheet">
<link href="https://cdn.anychart.com/releases/v8/fonts/css/anychart-font.min.css" type="text/css" rel="stylesheet">
<style type="text/css">
html,
body,
#container {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div id="container"></div>
<script>
anychart.onDocumentReady(function () {
// set chart theme
anychart.theme('darkBlue');
// create column chart
var chart = anychart.area();
// set chart title text settings
chart.title('Min and Max Connection Timeout');
// create area series with passed data
var data = anychart.data.set(getRangesData());
// create series
var series = chart.rangeStepArea(data);
series.stroke(false);
// disable hover markers
series.hovered().markers(false);
// disable selected markers
series.selected().markers(false);
// name the axes
chart.xAxis().title('Day hours');
chart.yAxis().title('ms');
// set container id for the chart
chart.container('container');
// initiate chart drawing
chart.draw();
});
function getRangesData() {
return [
{ x: '0', low: 232, high: 542 },
{ x: '1', low: 393, high: 522 },
{ x: '2', low: 368, high: 602 },
{ x: '3', low: 419, high: 612 },
{ x: '4', low: 194, high: 1052 },
{ x: '5', low: 379, high: 639 },
{ x: '6', low: 332, high: 712 },
{ x: '7', low: 457, high: 622 },
{ x: '8', low: 493, high: 692 },
{ x: '9', low: 468, high: 802 },
{ x: '10', low: 419, high: 612 },
{ x: '11', low: 194, high: 1052 },
{ x: '12', low: 579, high: 839 },
{ x: '13', low: 532, high: 812 },
{ x: '14', low: 579, high: 839 },
{ x: '15', low: 532, high: 812 },
{ x: '16', low: 557, high: 922 },
{ x: '17', low: 593, high: 822 },
{ x: '18', low: 668, high: 902 },
{ x: '19', low: 619, high: 712 },
{ x: '20', low: 694, high: 952 },
{ x: '21', low: 679, high: 1039 },
{ x: '22', low: 632, high: 912 },
{ x: '23', low: 432, high: 712 }
];
}
</script>
</body>
</html>
Area Chart looks like a Line Chart with the space between the line itself and the X-Axis filled with color. Area Charts are good at demonstrating how an amount of something changes continuously. A Step-Area means that the points of this Area Chart by default are the centers of small horiziontal lines, forming a kind of a diagram which reminds of signal monitoring. Any Range Chart point has two values: min and max, so it shows a range of values corresponds to the same category - for example, the minimum and the maximum temperature values that were registrated in a month.
This Chart has an only series describing connection timeouts during each hour of a day. There are no negative values for obvious reasons; the Y-Axis range is from 0 to 1200 ms, and the categories placed on the X-Axis demonstrate the day hours. The legend is disabled. Tooltips give all the information about the points: the highest, the lowest values and the current hour.