- Chart Gallery
- Linear Gauges
- Tallest Building
Tallest Building
{
"gauge": {
"zIndex": 0,
"enabled": true,
"type": "linear-gauge",
"title": {
"zIndex": 80,
"enabled": true,
"maxLength": null,
"fontSize": 16,
"fontFamily": "Verdana, Helvetica, Arial, sans-serif",
"fontColor": "#3e2723",
"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": 14,
"fontFamily": "Verdana, Helvetica, Arial, sans-serif",
"fontColor": "#ffffff",
"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": 0,
"right": 0
},
"background": {
"enabled": false
}
},
"separator": {
"zIndex": 1,
"enabled": true,
"fill": "#CECECE",
"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": "Verdana, Helvetica, Arial, sans-serif",
"fontColor": "#3e2723",
"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": "Verdana, Helvetica, Arial, sans-serif",
"fontColor": "#3e2723",
"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": "#CECECE",
"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": "Verdana, Helvetica, Arial, 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": 14,
"fontFamily": "Verdana, Helvetica, Arial, sans-serif",
"fontColor": "#ffffff",
"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": 0,
"right": 0
},
"background": {
"enabled": false
}
},
"separator": {
"zIndex": 1,
"enabled": false,
"fill": "#CECECE",
"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": [
"#6f3448",
"#857600",
"#f1a122",
"#a50b01",
"#400001",
"#a98b80",
"#c08081",
"#86614e",
"#c26364",
"#615060"
]
},
"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": "#CECECE",
"staggerMode": false,
"staggerMaxLines": 2,
"staggerLines": null,
"value": null,
"title": {
"zIndex": 35,
"enabled": false,
"maxLength": null,
"fontSize": 13,
"fontFamily": "Verdana, Helvetica, Arial, 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": "#CECECE",
"length": 6,
"position": "outside"
},
"minorTicks": {
"zIndex": 35,
"enabled": false,
"stroke": "#EAEAEA",
"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/wines.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('wines');
// 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.