- Chart Gallery
- Circular Gauges
- Solid Gauge
Solid Gauge
{
"gauge": {
"zIndex": 0,
"enabled": true,
"type": "circular-gauge",
"title": {
"zIndex": 80,
"enabled": true,
"maxLength": null,
"fontSize": 16,
"fontFamily": "Verdana, Helvetica, Arial, sans-serif",
"fontColor": "#757575",
"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": "Medicine manufacturing progress<br/><span style=\"color:#929292; font-size: 12px;\">(ACME CORPORATION)</span>",
"margin": {
"left": 0,
"top": 0,
"bottom": 20,
"right": 0
},
"padding": {
"left": 0,
"top": 0,
"bottom": 0,
"right": 0
},
"background": {
"zIndex": 0,
"enabled": false
}
},
"background": {
"zIndex": 0.5,
"enabled": true
},
"tooltip": {
"enabled": true,
"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": {
"color": "#bdbdbd",
"opacity": 0.6
},
"stroke": "none",
"width": "100%",
"height": 1,
"orientation": "top",
"margin": {
"left": 0,
"top": 5,
"bottom": 5,
"right": 0
}
},
"background": {
"zIndex": 0,
"enabled": true
}
},
"margin": {
"left": 50,
"top": 50,
"bottom": 50,
"right": 50
},
"padding": {
"left": 0,
"top": 0,
"bottom": 0,
"right": 0
},
"a11y": {
"enabled": true,
"mode": "chart-elements"
},
"autoRedraw": true,
"chartLabels": [
{
"zIndex": 50,
"enabled": true,
"fontSize": 13,
"fontFamily": "Verdana, Helvetica, Arial, sans-serif",
"fontColor": "#757575",
"fontOpacity": 1,
"fontDecoration": "none",
"fontStyle": "normal",
"fontVariant": "normal",
"fontWeight": "normal",
"letterSpacing": "normal",
"textDirection": "ltr",
"textShadow": "none",
"lineHeight": "normal",
"textIndent": 0,
"vAlign": "middle",
"hAlign": "center",
"wordWrap": "normal",
"wordBreak": "normal",
"textOverflow": "",
"selectable": false,
"disablePointerEvents": false,
"useHtml": true,
"text": "Temazepam, <span style=\"\">23%</span>",
"position": "left-top",
"width": null,
"height": "8.5%",
"anchor": "right-center",
"offsetX": 0,
"offsetY": "100%",
"rotation": 0,
"adjustFontSize": {
"width": false,
"height": false
},
"minFontSize": 8,
"maxFontSize": 72,
"background": {
"enabled": false
},
"padding": {
"left": 10,
"top": 0,
"bottom": 0,
"right": 10
}
},
{
"zIndex": 50,
"enabled": true,
"fontSize": 13,
"fontFamily": "Verdana, Helvetica, Arial, sans-serif",
"fontColor": "#757575",
"fontOpacity": 1,
"fontDecoration": "none",
"fontStyle": "normal",
"fontVariant": "normal",
"fontWeight": "normal",
"letterSpacing": "normal",
"textDirection": "ltr",
"textShadow": "none",
"lineHeight": "normal",
"textIndent": 0,
"vAlign": "middle",
"hAlign": "center",
"wordWrap": "normal",
"wordBreak": "normal",
"textOverflow": "",
"selectable": false,
"disablePointerEvents": false,
"useHtml": true,
"text": "Guaifenesin, <span style=\"\">34%</span>",
"position": "left-top",
"width": null,
"height": "8.5%",
"anchor": "right-center",
"offsetX": 0,
"offsetY": "80%",
"rotation": 0,
"adjustFontSize": {
"width": false,
"height": false
},
"minFontSize": 8,
"maxFontSize": 72,
"background": {
"enabled": false
},
"padding": {
"left": 10,
"top": 0,
"bottom": 0,
"right": 10
}
},
{
"zIndex": 50,
"enabled": true,
"fontSize": 13,
"fontFamily": "Verdana, Helvetica, Arial, sans-serif",
"fontColor": "#757575",
"fontOpacity": 1,
"fontDecoration": "none",
"fontStyle": "normal",
"fontVariant": "normal",
"fontWeight": "normal",
"letterSpacing": "normal",
"textDirection": "ltr",
"textShadow": "none",
"lineHeight": "normal",
"textIndent": 0,
"vAlign": "middle",
"hAlign": "center",
"wordWrap": "normal",
"wordBreak": "normal",
"textOverflow": "",
"selectable": false,
"disablePointerEvents": false,
"useHtml": true,
"text": "Salicylic Acid, <span style=\"\">67%</span>",
"position": "left-top",
"width": null,
"height": "8.5%",
"anchor": "right-center",
"offsetX": 0,
"offsetY": "60%",
"rotation": 0,
"adjustFontSize": {
"width": false,
"height": false
},
"minFontSize": 8,
"maxFontSize": 72,
"background": {
"enabled": false
},
"padding": {
"left": 10,
"top": 0,
"bottom": 0,
"right": 10
}
},
{
"zIndex": 50,
"enabled": true,
"fontSize": 13,
"fontFamily": "Verdana, Helvetica, Arial, sans-serif",
"fontColor": "#757575",
"fontOpacity": 1,
"fontDecoration": "none",
"fontStyle": "normal",
"fontVariant": "normal",
"fontWeight": "normal",
"letterSpacing": "normal",
"textDirection": "ltr",
"textShadow": "none",
"lineHeight": "normal",
"textIndent": 0,
"vAlign": "middle",
"hAlign": "center",
"wordWrap": "normal",
"wordBreak": "normal",
"textOverflow": "",
"selectable": false,
"disablePointerEvents": false,
"useHtml": true,
"text": "Fluoride, <span style=\"\">93%</span>",
"position": "left-top",
"width": null,
"height": "8.5%",
"anchor": "right-center",
"offsetX": 0,
"offsetY": "40%",
"rotation": 0,
"adjustFontSize": {
"width": false,
"height": false
},
"minFontSize": 8,
"maxFontSize": 72,
"background": {
"enabled": false
},
"padding": {
"left": 10,
"top": 0,
"bottom": 0,
"right": 10
}
},
{
"zIndex": 50,
"enabled": true,
"fontSize": 13,
"fontFamily": "Verdana, Helvetica, Arial, sans-serif",
"fontColor": "#757575",
"fontOpacity": 1,
"fontDecoration": "none",
"fontStyle": "normal",
"fontVariant": "normal",
"fontWeight": "normal",
"letterSpacing": "normal",
"textDirection": "ltr",
"textShadow": "none",
"lineHeight": "normal",
"textIndent": 0,
"vAlign": "middle",
"hAlign": "center",
"wordWrap": "normal",
"wordBreak": "normal",
"textOverflow": "",
"selectable": false,
"disablePointerEvents": false,
"useHtml": true,
"text": "Zinc Oxide, <span style=\"\">56%</span>",
"position": "left-top",
"width": null,
"height": "8.5%",
"anchor": "right-center",
"offsetX": 0,
"offsetY": "20%",
"rotation": 0,
"adjustFontSize": {
"width": false,
"height": false
},
"minFontSize": 8,
"maxFontSize": 72,
"background": {
"enabled": false
},
"padding": {
"left": 10,
"top": 0,
"bottom": 0,
"right": 10
}
}
],
"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",
"fill": "#fff",
"stroke": "none",
"startAngle": 0,
"circularPadding": "10%",
"encloseWithStraightLine": false,
"sweepAngle": 270,
"defaultPointerType": "needle",
"data": [
23,
34,
67,
93,
56,
100
],
"interactivity": {
"spotRadius": 2,
"multiSelectOnClick": false,
"unselectOnClickOutOfPoint": true,
"hoverMode": "single",
"selectionMode": "multi-select"
},
"axes": [
{
"zIndex": 10,
"enabled": true,
"fill": "none",
"overlapMode": "no-overlap",
"startAngle": null,
"width": "1%",
"radius": "100%",
"cornersRounding": "0%",
"drawFirstLabel": true,
"drawLastLabel": true,
"scale": {
"type": "linear",
"inverted": false,
"maximum": 100,
"minimum": 0,
"minimumGap": 0.1,
"maximumGap": 0.1,
"softMinimum": null,
"softMaximum": null,
"alignMinimum": true,
"alignMaximum": true,
"maxTicksCount": 1000,
"ticks": {
"mode": "linear",
"base": 0,
"allowFractional": true,
"interval": 1
},
"minorTicks": {
"mode": "linear",
"base": 0,
"allowFractional": true,
"interval": 1
},
"stackMode": "none",
"stackDirection": "direct",
"stickToZero": true,
"comparisonMode": "none"
},
"ticks": {
"zIndex": 10,
"enabled": false,
"length": null,
"type": "line",
"stroke": "none",
"fill": "#545f69",
"hatchFill": "none",
"position": "center"
},
"minorTicks": {
"zIndex": 10,
"enabled": false,
"length": null,
"type": "line",
"stroke": "none",
"fill": "#545f69",
"hatchFill": "none",
"position": "center"
},
"labels": {
"zIndex": 10.00004,
"enabled": false
},
"minorLabels": {
"zIndex": 10.00004,
"enabled": false
}
}
],
"pointers": [
{
"zIndex": 5,
"enabled": true,
"stroke": "none",
"fill": "#64b5f6",
"hatchFill": "none",
"axisIndex": 0,
"pointerType": "bar",
"dataIndex": 0,
"width": "17%",
"position": "center",
"radius": "100%"
},
{
"zIndex": 4,
"enabled": true,
"stroke": "none",
"fill": "#F5F4F4",
"hatchFill": "none",
"axisIndex": 0,
"pointerType": "bar",
"dataIndex": 5,
"width": "17%",
"position": "center",
"radius": "100%"
},
{
"zIndex": 5,
"enabled": true,
"stroke": "none",
"fill": "#1976d2",
"hatchFill": "none",
"axisIndex": 0,
"pointerType": "bar",
"dataIndex": 1,
"width": "17%",
"position": "center",
"radius": "80%"
},
{
"zIndex": 4,
"enabled": true,
"stroke": "none",
"fill": "#F5F4F4",
"hatchFill": "none",
"axisIndex": 0,
"pointerType": "bar",
"dataIndex": 5,
"width": "17%",
"position": "center",
"radius": "80%"
},
{
"zIndex": 5,
"enabled": true,
"stroke": "none",
"fill": "#ef6c00",
"hatchFill": "none",
"axisIndex": 0,
"pointerType": "bar",
"dataIndex": 2,
"width": "17%",
"position": "center",
"radius": "60%"
},
{
"zIndex": 4,
"enabled": true,
"stroke": "none",
"fill": "#F5F4F4",
"hatchFill": "none",
"axisIndex": 0,
"pointerType": "bar",
"dataIndex": 5,
"width": "17%",
"position": "center",
"radius": "60%"
},
{
"zIndex": 5,
"enabled": true,
"stroke": "none",
"fill": "#ffd54f",
"hatchFill": "none",
"axisIndex": 0,
"pointerType": "bar",
"dataIndex": 3,
"width": "17%",
"position": "center",
"radius": "40%"
},
{
"zIndex": 4,
"enabled": true,
"stroke": "none",
"fill": "#F5F4F4",
"hatchFill": "none",
"axisIndex": 0,
"pointerType": "bar",
"dataIndex": 5,
"width": "17%",
"position": "center",
"radius": "40%"
},
{
"zIndex": 5,
"enabled": true,
"stroke": "none",
"fill": "#455a64",
"hatchFill": "none",
"axisIndex": 0,
"pointerType": "bar",
"dataIndex": 4,
"width": "17%",
"position": "center",
"radius": "20%"
},
{
"zIndex": 4,
"enabled": true,
"stroke": "none",
"fill": "#F5F4F4",
"hatchFill": "none",
"axisIndex": 0,
"pointerType": "bar",
"dataIndex": 5,
"width": "17%",
"position": "center",
"radius": "20%"
}
]
}
}
<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/js/anychart-circular-gauge.min.js"></script>
<script src="https://cdn.anychart.com/releases/v8/themes/light_earth.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>
var names = [
'Temazepam',
'Guaifenesin',
'Salicylic Acid',
'Fluoride',
'Zinc Oxide',
'Acetaminophen'
];
var data = [23, 34, 67, 93, 56, 100];
var dataSet = anychart.data.set(data);
var palette = anychart.palettes
.distinctColors()
.items([
'#64b5f6',
'#1976d2',
'#ef6c00',
'#ffd54f',
'#455a64',
'#96a6a6',
'#dd2c00',
'#00838f',
'#00bfa5',
'#ffa000'
]);
var makeBarWithBar = function (gauge, radius, i, width) {
var stroke = null;
gauge
.label(i)
.text(names[i] + ', <span style="">' + data[i] + '%</span>') // color: #7c868e
.useHtml(true);
gauge
.label(i)
.hAlign('center')
.vAlign('middle')
.anchor('right-center')
.padding(0, 10)
.height(width / 2 + '%')
.offsetY(radius + '%')
.offsetX(0);
gauge
.bar(i)
.dataIndex(i)
.radius(radius)
.width(width)
.fill(palette.itemAt(i))
.stroke(null)
.zIndex(5);
gauge
.bar(i + 100)
.dataIndex(5)
.radius(radius)
.width(width)
.fill('#F5F4F4')
.stroke(stroke)
.zIndex(4);
return gauge.bar(i);
};
anychart.onDocumentReady(function () {
// set chart theme
anychart.theme('lightEarth');
var gauge = anychart.gauges.circular();
gauge.data(dataSet);
gauge
.fill('#fff')
.stroke(null)
.padding(0)
.margin(100)
.startAngle(0)
.sweepAngle(270);
var axis = gauge.axis().radius(100).width(1).fill(null);
axis
.scale()
.minimum(0)
.maximum(100)
.ticks({ interval: 1 })
.minorTicks({ interval: 1 });
axis.labels().enabled(false);
axis.ticks().enabled(false);
axis.minorTicks().enabled(false);
makeBarWithBar(gauge, 100, 0, 17);
makeBarWithBar(gauge, 80, 1, 17);
makeBarWithBar(gauge, 60, 2, 17);
makeBarWithBar(gauge, 40, 3, 17);
makeBarWithBar(gauge, 20, 4, 17);
gauge.margin(50);
gauge
.title()
.text(
'Medicine manufacturing progress' +
'<br/><span style="color:#929292; font-size: 12px;">(ACME CORPORATION)</span>'
)
.useHtml(true);
gauge
.title()
.enabled(true)
.hAlign('center')
.padding(0)
.margin([0, 0, 20, 0]);
gauge.container('container');
gauge.draw();
});
</script>
</body>
</html>
Gauge Charts suit measuring anything which can be represented as a part of a radial scale and if its result can be shown on a radial scale. For example, a speedometer is one of the most popular circular gauges. Though, there are a lot of other ways of using this type of gauge.
This Chart shows the progress of some medicine of the ACME Corporation manufacturing, as can be clearly seen from its title. The gauge stroke is invisible; there are 5 bars created, each represents a piece of medicine. Each bar is 270 degrees; the rest quarter of a circle is occupied by labels of these bars. The labels contain the medicine name and the percent of readiness. All these bars are colored in light grey, as they represent the whole process of producing medicine. Each of those grey bars holds another bar inside – these bars show the progress of manufacturing. These are differently colored.