- Chart Gallery
- Linear Gauges
- Tallest Building
Tallest Building
{
"gauge": {
"zIndex": 0,
"enabled": true,
"type": "linear-gauge",
"title": {
"zIndex": 80,
"enabled": true,
"maxLength": null,
"fontSize": 17,
"fontFamily": "\"Source Sans Pro\", sans-serif",
"fontColor": "#b2aab5",
"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": true,
"width": null,
"height": null,
"align": "center",
"text": "Tallest Building by Function<br><span style=\"color: #212121; font-size: 12px\">(According to Wikipedia.org)</span>",
"margin": {
"left": 0,
"top": 0,
"bottom": 0,
"right": 0
},
"padding": {
"left": 0,
"top": 10,
"bottom": 15,
"right": 0
},
"background": {
"zIndex": 0,
"enabled": false
}
},
"background": {
"zIndex": 0.5,
"enabled": true
},
"tooltip": {
"enabled": true,
"useHtml": true,
"title": {
"zIndex": 1,
"enabled": true,
"maxLength": null,
"fontSize": 15,
"fontFamily": "\"Source Sans Pro\", sans-serif",
"fontColor": "#745c65",
"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": "left",
"orientation": "top",
"rotation": 0,
"text": "",
"margin": {
"left": 0,
"top": 0,
"bottom": 0,
"right": 0
},
"padding": {
"left": 0,
"top": 0,
"bottom": 5,
"right": 0
},
"background": {
"enabled": false
}
},
"separator": {
"zIndex": 1,
"enabled": true,
"fill": "#5f5b61",
"stroke": "none",
"width": "100%",
"height": 1,
"orientation": "top",
"margin": {
"left": 0,
"top": 5,
"bottom": 5,
"right": 0
}
},
"background": {
"zIndex": 0,
"enabled": true
}
},
"margin": {
"left": 0,
"top": 0,
"bottom": 0,
"right": 0
},
"padding": {
"left": 0,
"top": 0,
"bottom": 50,
"right": 0
},
"a11y": {
"enabled": true,
"mode": "chart-elements"
},
"autoRedraw": true,
"bounds": {},
"contextMenu": {
"enabled": true
},
"credits": {
"text": "Data source: https://en.wikipedia.org/wiki/List_of_tallest_buildings_and_structures",
"url": "https://en.wikipedia.org/wiki/List_of_tallest_buildings_and_structures",
"alt": "AnyChart - JavaScript Charts designed to be embedded and integrated{{anychart-version}}",
"imgAlt": "AnyChart - JavaScript Charts",
"logoSrc": "https://en.wikipedia.org/static/favicon/wikipedia.ico",
"enabled": true
},
"selectRectangleMarqueeFill": {
"color": "#d3d3d3",
"opacity": 0.4
},
"selectRectangleMarqueeStroke": "#d3d3d3",
"legend": {
"zIndex": 200,
"enabled": true,
"fontSize": 12,
"fontFamily": "\"Source Sans Pro\", sans-serif",
"fontColor": "#b2aab5",
"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": true,
"inverted": false,
"itemsLayout": "vertical",
"iconSize": 15,
"width": null,
"height": null,
"maxWidth": null,
"maxHeight": null,
"position": "left",
"positionMode": "outside",
"drag": false,
"itemsFormat": null,
"titleFormat": null,
"itemsHAlign": "left",
"itemsSpacing": 15,
"itemsSourceMode": "default",
"hoverCursor": "pointer",
"iconTextSpacing": 5,
"align": "top",
"margin": {
"left": 0,
"top": 0,
"bottom": 0,
"right": 0
},
"padding": {
"left": 30,
"top": 0,
"bottom": 0,
"right": 30
},
"background": {
"enabled": false
},
"title": {
"enabled": false,
"maxLength": null,
"fontSize": 15,
"fontFamily": "\"Source Sans Pro\", sans-serif",
"fontColor": "#b2aab5",
"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": "#5f5b61",
"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": "\"Source Sans Pro\", sans-serif",
"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": "start",
"wordWrap": "normal",
"wordBreak": "normal",
"textOverflow": "",
"selectable": false,
"disablePointerEvents": false,
"useHtml": false,
"orientation": "bottom",
"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": 15,
"fontFamily": "\"Source Sans Pro\", sans-serif",
"fontColor": "#745c65",
"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": "left",
"orientation": "top",
"rotation": 0,
"text": "",
"margin": {
"left": 0,
"top": 0,
"bottom": 0,
"right": 0
},
"padding": {
"left": 0,
"top": 0,
"bottom": 5,
"right": 0
},
"background": {
"enabled": false
}
},
"separator": {
"zIndex": 1,
"enabled": false,
"fill": "#5f5b61",
"stroke": "none",
"width": "100%",
"height": 1,
"orientation": "top",
"margin": {
"left": 0,
"top": 5,
"bottom": 5,
"right": 0
}
},
"background": {
"zIndex": 0,
"enabled": true
}
}
},
"interactivity": {
"spotRadius": 2,
"multiSelectOnClick": false,
"unselectOnClickOutOfPoint": true,
"hoverMode": "single",
"selectionMode": "multi-select"
},
"palette": {
"type": "distinct",
"items": [
"#aa8ab3",
"#b7cbe2",
"#cdd18e",
"#938d9c",
"#6f5264",
"#96246a",
"#519790",
"#6aabcc",
"#61687d",
"#7b8030"
]
},
"markerPalette": {
"items": [
"circle",
"diamond",
"square",
"triangle-down",
"triangle-up",
"triangle-left",
"triangle-right",
"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
}
]
},
"globalOffset": "0%",
"layout": "vertical",
"defaultPointerType": "bar",
"data": [
{
"name": "Burj Khalifa",
"category": "Mixed-Use",
"country": "United Arab Emirates",
"city": "Dubai",
"value": 830
},
{
"name": "One World Trade Center",
"category": "Office",
"country": "United States",
"city": "New York City",
"value": 541
},
{
"name": "432 Park Avenue",
"category": "Residential",
"country": "United States",
"city": "New York City",
"value": 425.5
},
{
"name": "JW Marriott Marquis Dubai",
"category": "Hotel",
"country": "United Arab Emirates",
"city": "Dubai",
"value": 355
},
{
"name": "Moscow State University",
"category": "Educational",
"country": "Russia",
"city": "Moscow",
"value": 240
},
{
"name": "Ulmer Münster",
"category": "Religious",
"country": "Germany",
"city": "Ulm",
"value": 162
},
{
"name": "Guy's Hospital",
"category": "Hospital",
"country": "United Kingdom",
"city": "London",
"value": 149
}
],
"scale": 0,
"axes": [
{
"enabled": true,
"width": "0%",
"drawFirstLabel": true,
"drawLastLabel": true,
"overlapMode": "no-overlap",
"stroke": {
"color": "#5f5b61",
"opacity": 0.8
},
"staggerMode": false,
"staggerMaxLines": 2,
"staggerLines": null,
"value": null,
"title": {
"zIndex": 35,
"enabled": false,
"maxLength": null,
"fontSize": 15,
"fontFamily": "\"Source Sans Pro\", sans-serif",
"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": "Axis title",
"margin": {
"left": 0,
"top": 0,
"bottom": 0,
"right": 0
},
"padding": {
"left": 5,
"top": 5,
"bottom": 5,
"right": 5
},
"background": {
"enabled": false
}
},
"labels": {
"zIndex": 35,
"enabled": true,
"useHtml": true,
"format": "{%Value} m."
},
"minorLabels": {
"zIndex": 35,
"enabled": false
},
"ticks": {
"zIndex": 35,
"enabled": true,
"stroke": {
"color": "#5f5b61",
"opacity": 0.8
},
"length": 6,
"position": "outside"
},
"minorTicks": {
"zIndex": 35,
"enabled": false,
"stroke": {
"color": "#534f54",
"opacity": 0.8
},
"length": 4,
"position": "outside"
},
"offset": "-11%",
"scale": 0
}
],
"pointers": [
{
"enabled": true,
"name": "Burj Khalifa<br/><span style=\"color: #212121; font-size: 10px\">United Arab Emirates,<br/>Dubai</span>",
"width": "9%",
"offset": "-10%",
"pointerType": "bar",
"dataIndex": 0,
"legendItem": {
"enabled": true
},
"color": "#024174",
"normal": {
"hatchFill": "none",
"labels": {
"zIndex": 0,
"enabled": true,
"fontSize": 11,
"fontColor": "white",
"position": "center",
"anchor": "center",
"rotation": -90
}
},
"hovered": {
"labels": {
"enabled": true,
"fontColor": "#212121",
"fontWeight": "600"
}
},
"selected": {
"labels": {
"enabled": true,
"fontColor": "white",
"fontWeight": "600"
}
},
"scale": 0
},
{
"enabled": true,
"width": "3%",
"offset": "-14%",
"pointerType": "marker",
"dataIndex": 0,
"legendItem": {
"enabled": false
},
"color": "#024174",
"normal": {
"hatchFill": "none",
"labels": {
"zIndex": 0.00001,
"enabled": true,
"format": "{%Value} m.",
"position": "left-center",
"anchor": "right-center",
"offsetX": -5
}
},
"hovered": {
"labels": {
"enabled": true,
"fontColor": "#212121",
"fontWeight": "600"
}
},
"selected": {
"labels": {
"enabled": true,
"fontColor": "#212121",
"fontWeight": "600"
}
},
"type": "arrowhead",
"scale": 0
},
{
"enabled": true,
"name": "One World Trade Center<br/><span style=\"color: #212121; font-size: 10px\">United States,<br/>New York City</span>",
"width": "9%",
"offset": "3%",
"pointerType": "bar",
"dataIndex": 1,
"legendItem": {
"enabled": true
},
"color": "#02579A",
"normal": {
"hatchFill": "none",
"labels": {
"zIndex": 0.00002,
"enabled": true,
"fontSize": 11,
"fontColor": "white",
"position": "center",
"anchor": "center",
"rotation": -90
}
},
"hovered": {
"labels": {
"enabled": true,
"fontColor": "#212121",
"fontWeight": "600"
}
},
"selected": {
"labels": {
"enabled": true,
"fontColor": "white",
"fontWeight": "600"
}
},
"scale": 0
},
{
"enabled": true,
"width": "3%",
"offset": "-14%",
"pointerType": "marker",
"dataIndex": 1,
"legendItem": {
"enabled": false
},
"color": "#02579A",
"normal": {
"hatchFill": "none",
"labels": {
"zIndex": 0.00003,
"enabled": true,
"format": "{%Value} m.",
"position": "left-center",
"anchor": "right-center",
"offsetX": -5
}
},
"hovered": {
"labels": {
"enabled": true,
"fontColor": "#212121",
"fontWeight": "600"
}
},
"selected": {
"labels": {
"enabled": true,
"fontColor": "#212121",
"fontWeight": "600"
}
},
"type": "arrowhead",
"scale": 0
},
{
"enabled": true,
"name": "432 Park Avenue<br/><span style=\"color: #212121; font-size: 10px\">United States,<br/>New York City</span>",
"width": "9%",
"offset": "16%",
"pointerType": "bar",
"dataIndex": 2,
"legendItem": {
"enabled": true
},
"color": "#1976D3",
"normal": {
"hatchFill": "none",
"labels": {
"zIndex": 0.00004,
"enabled": true,
"fontSize": 11,
"fontColor": "white",
"position": "center",
"anchor": "center",
"rotation": -90
}
},
"hovered": {
"labels": {
"enabled": true,
"fontColor": "#212121",
"fontWeight": "600"
}
},
"selected": {
"labels": {
"enabled": true,
"fontColor": "white",
"fontWeight": "600"
}
},
"scale": 0
},
{
"enabled": true,
"width": "3%",
"offset": "-14%",
"pointerType": "marker",
"dataIndex": 2,
"legendItem": {
"enabled": false
},
"color": "#1976D3",
"normal": {
"hatchFill": "none",
"labels": {
"zIndex": 0.00005,
"enabled": true,
"format": "{%Value} m.",
"position": "left-center",
"anchor": "right-center",
"offsetX": -5
}
},
"hovered": {
"labels": {
"enabled": true,
"fontColor": "#212121",
"fontWeight": "600"
}
},
"selected": {
"labels": {
"enabled": true,
"fontColor": "#212121",
"fontWeight": "600"
}
},
"type": "arrowhead",
"scale": 0
},
{
"enabled": true,
"name": "JW Marriott Marquis Dubai<br/><span style=\"color: #212121; font-size: 10px\">United Arab Emirates,<br/>Dubai</span>",
"width": "9%",
"offset": "29%",
"pointerType": "bar",
"dataIndex": 3,
"legendItem": {
"enabled": true
},
"color": "#42A5F6",
"normal": {
"hatchFill": "none",
"labels": {
"zIndex": 0.00006,
"enabled": true,
"fontSize": 11,
"fontColor": "white",
"position": "center",
"anchor": "center",
"rotation": -90
}
},
"hovered": {
"labels": {
"enabled": true,
"fontColor": "#212121",
"fontWeight": "600"
}
},
"selected": {
"labels": {
"enabled": true,
"fontColor": "white",
"fontWeight": "600"
}
},
"scale": 0
},
{
"enabled": true,
"width": "3%",
"offset": "-14%",
"pointerType": "marker",
"dataIndex": 3,
"legendItem": {
"enabled": false
},
"color": "#42A5F6",
"normal": {
"hatchFill": "none",
"labels": {
"zIndex": 0.00007,
"enabled": true,
"format": "{%Value} m.",
"position": "left-center",
"anchor": "right-center",
"offsetX": -5
}
},
"hovered": {
"labels": {
"enabled": true,
"fontColor": "#212121",
"fontWeight": "600"
}
},
"selected": {
"labels": {
"enabled": true,
"fontColor": "#212121",
"fontWeight": "600"
}
},
"type": "arrowhead",
"scale": 0
},
{
"enabled": true,
"name": "Moscow State University<br/><span style=\"color: #212121; font-size: 10px\">Russia,<br/>Moscow</span>",
"width": "9%",
"offset": "42%",
"pointerType": "bar",
"dataIndex": 4,
"legendItem": {
"enabled": true
},
"color": "#90CAF8",
"normal": {
"hatchFill": "none",
"labels": {
"zIndex": 0.00008,
"enabled": true,
"fontSize": 11,
"fontColor": "white",
"position": "center",
"anchor": "center",
"rotation": -90
}
},
"hovered": {
"labels": {
"enabled": true,
"fontColor": "#212121",
"fontWeight": "600"
}
},
"selected": {
"labels": {
"enabled": true,
"fontColor": "white",
"fontWeight": "600"
}
},
"scale": 0
},
{
"enabled": true,
"width": "3%",
"offset": "-14%",
"pointerType": "marker",
"dataIndex": 4,
"legendItem": {
"enabled": false
},
"color": "#90CAF8",
"normal": {
"hatchFill": "none",
"labels": {
"zIndex": 0.00009,
"enabled": true,
"format": "{%Value} m.",
"position": "left-center",
"anchor": "right-center",
"offsetX": -5
}
},
"hovered": {
"labels": {
"enabled": true,
"fontColor": "#212121",
"fontWeight": "600"
}
},
"selected": {
"labels": {
"enabled": true,
"fontColor": "#212121",
"fontWeight": "600"
}
},
"type": "arrowhead",
"scale": 0
},
{
"enabled": true,
"name": "Ulmer Münster<br/><span style=\"color: #212121; font-size: 10px\">Germany,<br/>Ulm</span>",
"width": "9%",
"offset": "55%",
"pointerType": "bar",
"dataIndex": 5,
"legendItem": {
"enabled": true
},
"color": "#b3e5fc",
"normal": {
"hatchFill": "none",
"labels": {
"zIndex": 0.0001,
"enabled": true,
"fontSize": 11,
"fontColor": "white",
"position": "center",
"anchor": "center",
"rotation": -90
}
},
"hovered": {
"labels": {
"enabled": true,
"fontColor": "#212121",
"fontWeight": "600"
}
},
"selected": {
"labels": {
"enabled": true,
"fontColor": "white",
"fontWeight": "600"
}
},
"scale": 0
},
{
"enabled": true,
"width": "3%",
"offset": "-14%",
"pointerType": "marker",
"dataIndex": 5,
"legendItem": {
"enabled": false
},
"color": "#b3e5fc",
"normal": {
"hatchFill": "none",
"labels": {
"zIndex": 0.00011,
"enabled": true,
"format": "{%Value} m.",
"position": "left-center",
"anchor": "right-center",
"offsetX": -5
}
},
"hovered": {
"labels": {
"enabled": true,
"fontColor": "#212121",
"fontWeight": "600"
}
},
"selected": {
"labels": {
"enabled": true,
"fontColor": "#212121",
"fontWeight": "600"
}
},
"type": "arrowhead",
"scale": 0
}
],
"scales": [
{
"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,
"explicit": [
0,
1000
]
},
"minorTicks": {
"mode": "linear",
"base": 0,
"allowFractional": true,
"count": 5
},
"stackMode": "none",
"stackDirection": "direct",
"stickToZero": true,
"comparisonMode": "none"
}
]
}
}
<html>
<head>
<script src="https://cdn.anychart.com/samples/linear-gauges/tallest-building/data.js"></script>
<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/js/anychart-linear-gauge.min.js"></script>
<script src="https://cdn.anychart.com/releases/v8/themes/dark_provence.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('darkProvence');
// Set gauge type
var gauge = anychart.gauges.linear();
// The data used in this sample can be obtained from the CDN
// https://cdn.anychart.com/samples/linear-gauges/tallest-building/data.js
var data = getData();
// Set credits
gauge
.credits()
.enabled(true)
.url(
'https://en.wikipedia.org/wiki/List_of_tallest_buildings_and_structures'
)
.text(
'Data source: https://en.wikipedia.org/wiki/List_of_tallest_buildings_and_structures'
)
.logoSrc('https://en.wikipedia.org/static/favicon/wikipedia.ico');
// Creates data set on our data
gauge.data(data);
gauge.padding([0, 0, 50, 0]);
// Set Chart Title
var title = gauge.title();
title
.enabled(true)
.useHtml(true)
.padding([10, 0, 15, 0])
.text(
'Tallest Building by Function<br>' +
'<span style="color: #212121; font-size: 12px">(According to Wikipedia.org)</span>'
);
// Helper function to create Bar Series
function createBar(i, color) {
// Create bar pointer
var bar = gauge.bar(i);
bar
.color(color)
// Set pointer offset of the width gauge
.offset(i * 13 - 10)
// Set pointer width
.width('9%')
.name(
data[i].name +
'<br/><span style="color: #212121; font-size: 10px">' +
data[i].country +
',<br/>' +
data[i].city +
'</span>'
);
// Set pointer label
bar
.labels()
.enabled(true)
.position('center')
.anchor('center')
.rotation(-90)
.fontSize(11)
.fontColor('white')
.format(function () {
return this.getData('category');
});
bar
.hovered()
.labels()
.enabled(true)
.fontColor('#212121')
.fontWeight('600');
bar
.selected()
.labels()
.enabled(true)
.fontColor('white')
.fontWeight('600');
// Set marker pointer
var marker = gauge.marker(i);
marker.color(color).offset('-14%');
marker
.labels()
.enabled(true)
.position('left-center')
.offsetX(-5)
.anchor('right-center')
.format('{%Value} m.');
marker
.hovered()
.labels()
.enabled(true)
.fontColor('#212121')
.fontWeight('600');
marker
.selected()
.labels()
.enabled(true)
.fontColor('#212121')
.fontWeight('600');
marker.legendItem(false);
marker.type('arrowhead');
}
// Create series
createBar(0, '#024174');
createBar(1, '#02579A');
createBar(2, '#1976D3');
createBar(3, '#42A5F6');
createBar(4, '#90CAF8');
createBar(5, '#b3e5fc');
var legend = gauge.legend();
// Turn on legend and sets settings
legend
.enabled(true)
.useHtml(true)
.padding([0, 30, 0, 30])
.fontSize(12)
.position('left')
.align('top')
.itemsLayout('vertical');
// Set paginator in the bottom position
legend.paginator().orientation('bottom');
// remove all listeners for legend
legend.removeAllListeners();
// Set axis scale settings
var scale = gauge.scale();
scale.ticks([0, 1000]);
// Enable axis
var axis = gauge.axis();
axis.offset('-11%').width('0%');
// Set axis labels formatter
axis.labels().useHtml(true).format('{%Value} m.');
// Set tooltip formatter
gauge
.tooltip()
.useHtml(true)
.format(function () {
return (
'<span style="color: #EAEAEA;">' +
this.getData('country') +
', ' +
this.getData('city') +
'<br/><span style="font-size: 14px">' +
this.value +
' m.</span></span>'
);
});
gauge.tooltip().titleFormat(function () {
return this.getData('name');
});
gauge.tooltip().titleFormat(function () {
return this.getData('name');
});
// Set container id and initiate drawing
gauge.container('container');
gauge.draw();
});
</script>
</body>
</html>
Linear Gauges are predominantly used for demonstrating a single value, or measurement, like a battery charge level. Mostly they use minimal set of elements, e.g. axes, label and tooltip might be dropped as a gauge itself is a pointer.
This particular gauge has six bars and one Y-Axis to the left. Each bar represents one of the 6 tallest buildings in the world (in different areas of usage - from educational to business centers). All bars and axis are scaled in meters from 0 to 1000, and there is a marker on the Y-Axis for each bar value. Both markers and bars are interactive: when being hovered, tooltips show up and display the main information about the point. The legend is also enabled and put to the left from the bars vertically, so you can easily manage the visibility of the bars.