- Chart Gallery
- Circular Gauges
- Compass Gauge
Compass Gauge
{
"gauge": {
"zIndex": 0,
"enabled": true,
"type": "circular-gauge",
"title": {
"zIndex": 80,
"enabled": false,
"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": false,
"width": null,
"height": null,
"align": "center",
"text": "Chart Title",
"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": 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
}
},
"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,
"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": "white",
"stroke": "none",
"startAngle": 0,
"circularPadding": "10%",
"encloseWithStraightLine": false,
"sweepAngle": 360,
"defaultPointerType": "needle",
"data": [
0,
45,
90,
135,
180,
225,
270,
315
],
"cap": {
"zIndex": 50,
"enabled": false,
"radius": "10%",
"stroke": {
"color": "#545f69",
"thickness": 5
},
"fill": "white",
"hatchFill": "none"
},
"interactivity": {
"spotRadius": 2,
"multiSelectOnClick": false,
"unselectOnClickOutOfPoint": true,
"hoverMode": "single",
"selectionMode": "multi-select"
},
"axes": [
{
"zIndex": 10,
"enabled": true,
"fill": "none",
"overlapMode": "no-overlap",
"startAngle": 0,
"width": "2%",
"sweepAngle": 360,
"radius": "100%",
"cornersRounding": "0%",
"drawFirstLabel": true,
"drawLastLabel": true,
"scale": {
"type": "linear",
"inverted": false,
"maximum": 360,
"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": 90
},
"minorTicks": {
"mode": "linear",
"base": 0,
"allowFractional": true,
"interval": 45
},
"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": true,
"fontSize": 20,
"position": "inside"
},
"minorLabels": {
"zIndex": 10.00004,
"enabled": false
}
},
{
"zIndex": 10,
"enabled": true,
"fill": "none",
"overlapMode": "no-overlap",
"startAngle": 0,
"width": "1%",
"sweepAngle": 360,
"radius": "50%",
"cornersRounding": "0%",
"drawFirstLabel": true,
"drawLastLabel": true,
"scale": {
"type": "linear",
"inverted": false,
"maximum": 360,
"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": 45
},
"minorTicks": {
"mode": "linear",
"base": 0,
"allowFractional": true,
"interval": 15
},
"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": true,
"length": "20%",
"stroke": {
"color": "#545f69",
"thickness": 2
},
"fill": "#545f69",
"hatchFill": "none",
"position": "outside"
},
"labels": {
"zIndex": 10.00004,
"enabled": true,
"padding": {
"left": 2,
"top": 2,
"bottom": 2,
"right": 2
},
"fontSize": 20,
"position": "outside"
},
"minorLabels": {
"zIndex": 10.00004,
"enabled": false
}
}
],
"pointers": [
{
"zIndex": 40,
"enabled": true,
"stroke": {
"color": "#545f69",
"thickness": 1
},
"fill": {
"keys": [
{
"offset": 0,
"color": "#545f69"
},
{
"offset": 0.49,
"color": "#545f69"
},
{
"offset": 0.5,
"color": "#4C565E"
},
{
"offset": 0.51,
"color": "white"
},
{
"offset": 1,
"color": "white"
}
],
"angle": -180,
"mode": false,
"opacity": 1
},
"hatchFill": "none",
"axisIndex": 0,
"pointerType": "needle",
"startWidth": "0%",
"startRadius": "0%",
"middleWidth": "10.32%",
"middleRadius": "25%",
"endWidth": "0%",
"endRadius": "87%"
},
{
"zIndex": 40.0001,
"enabled": true,
"stroke": {
"color": "#545f69",
"thickness": 1
},
"fill": {
"keys": [
{
"offset": 0,
"color": "#545f69"
},
{
"offset": 0.49,
"color": "#545f69"
},
{
"offset": 0.5,
"color": "#4C565E"
},
{
"offset": 0.51,
"color": "white"
},
{
"offset": 1,
"color": "white"
}
],
"angle": -225,
"mode": false,
"opacity": 1
},
"hatchFill": "none",
"axisIndex": 0,
"pointerType": "needle",
"startWidth": "0%",
"startRadius": "0%",
"middleWidth": "10.32%",
"middleRadius": "25%",
"endWidth": "0%",
"endRadius": "45%"
},
{
"zIndex": 40.0002,
"enabled": true,
"stroke": {
"color": "#545f69",
"thickness": 1
},
"fill": {
"keys": [
{
"offset": 0,
"color": "#545f69"
},
{
"offset": 0.49,
"color": "#545f69"
},
{
"offset": 0.5,
"color": "#4C565E"
},
{
"offset": 0.51,
"color": "white"
},
{
"offset": 1,
"color": "white"
}
],
"angle": 90,
"mode": false,
"opacity": 1
},
"hatchFill": "none",
"axisIndex": 0,
"pointerType": "needle",
"startWidth": "0%",
"startRadius": "0%",
"middleWidth": "10.32%",
"middleRadius": "25%",
"endWidth": "0%",
"endRadius": "87%"
},
{
"zIndex": 40.0003,
"enabled": true,
"stroke": {
"color": "#545f69",
"thickness": 1
},
"fill": {
"keys": [
{
"offset": 0,
"color": "#545f69"
},
{
"offset": 0.49,
"color": "#545f69"
},
{
"offset": 0.5,
"color": "#4C565E"
},
{
"offset": 0.51,
"color": "white"
},
{
"offset": 1,
"color": "white"
}
],
"angle": 45,
"mode": false,
"opacity": 1
},
"hatchFill": "none",
"axisIndex": 0,
"pointerType": "needle",
"startWidth": "0%",
"startRadius": "0%",
"middleWidth": "10.32%",
"middleRadius": "25%",
"endWidth": "0%",
"endRadius": "45%"
},
{
"zIndex": 40.0004,
"enabled": true,
"stroke": {
"color": "#545f69",
"thickness": 1
},
"fill": {
"keys": [
{
"offset": 0,
"color": "#545f69"
},
{
"offset": 0.49,
"color": "#545f69"
},
{
"offset": 0.5,
"color": "#4C565E"
},
{
"offset": 0.51,
"color": "white"
},
{
"offset": 1,
"color": "white"
}
],
"angle": 0,
"mode": false,
"opacity": 1
},
"hatchFill": "none",
"axisIndex": 0,
"pointerType": "needle",
"startWidth": "0%",
"startRadius": "0%",
"middleWidth": "10.32%",
"middleRadius": "25%",
"endWidth": "0%",
"endRadius": "87%"
},
{
"zIndex": 40.0005,
"enabled": true,
"stroke": {
"color": "#545f69",
"thickness": 1
},
"fill": {
"keys": [
{
"offset": 0,
"color": "#545f69"
},
{
"offset": 0.49,
"color": "#545f69"
},
{
"offset": 0.5,
"color": "#4C565E"
},
{
"offset": 0.51,
"color": "white"
},
{
"offset": 1,
"color": "white"
}
],
"angle": -45,
"mode": false,
"opacity": 1
},
"hatchFill": "none",
"axisIndex": 0,
"pointerType": "needle",
"startWidth": "0%",
"startRadius": "0%",
"middleWidth": "10.32%",
"middleRadius": "25%",
"endWidth": "0%",
"endRadius": "45%"
},
{
"zIndex": 40.0006,
"enabled": true,
"stroke": {
"color": "#545f69",
"thickness": 1
},
"fill": {
"keys": [
{
"offset": 0,
"color": "#545f69"
},
{
"offset": 0.49,
"color": "#545f69"
},
{
"offset": 0.5,
"color": "#4C565E"
},
{
"offset": 0.51,
"color": "white"
},
{
"offset": 1,
"color": "white"
}
],
"angle": 270,
"mode": false,
"opacity": 1
},
"hatchFill": "none",
"axisIndex": 0,
"pointerType": "needle",
"startWidth": "0%",
"startRadius": "0%",
"middleWidth": "10.32%",
"middleRadius": "25%",
"endWidth": "0%",
"endRadius": "87%"
},
{
"zIndex": 40.0007,
"enabled": true,
"stroke": {
"color": "#545f69",
"thickness": 1
},
"fill": {
"keys": [
{
"offset": 0,
"color": "#545f69"
},
{
"offset": 0.49,
"color": "#545f69"
},
{
"offset": 0.5,
"color": "#4C565E"
},
{
"offset": 0.51,
"color": "white"
},
{
"offset": 1,
"color": "white"
}
],
"angle": 225,
"mode": false,
"opacity": 1
},
"hatchFill": "none",
"axisIndex": 0,
"pointerType": "needle",
"startWidth": "0%",
"startRadius": "0%",
"middleWidth": "10.32%",
"middleRadius": "25%",
"endWidth": "0%",
"endRadius": "45%"
}
]
}
}
<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/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>
var darkAccentColor = '#545f69';
var compassData = [0, 45, 90, 135, 180, 225, 270, 315];
function NeedleFill(needle) {
var angle = compassData[needle.dataIndex()];
if (angle === 0) angle -= 180;
if (angle === 45) angle -= 270;
if (angle === 135) angle -= 90;
if (angle === 180) angle -= 180;
if (angle === 225) angle -= 270;
if (angle === 315) angle -= 90;
return {
keys: ['0.49 ' + darkAccentColor, '0.5 #4C565E', '0.51 white'],
angle: angle
};
}
var makeNeedle = function (needle, size) {
if (size === 'big') var endRadius = 87;
else endRadius = 45;
needle
.stroke('1 ' + darkAccentColor)
.fill(NeedleFill(needle))
.startRadius(0)
.middleRadius(25)
.endRadius(endRadius)
.startWidth(0)
.middleWidth(10.32)
.endWidth(0);
};
anychart.onDocumentReady(function () {
// set chart theme
anychart.theme('wines');
var gauge = anychart.gauges.circular();
gauge.fill('white').padding(0).margin(50).stroke(null);
gauge.data(compassData);
gauge
.axis()
.scale()
.minimum(0)
.maximum(360)
.ticks({ interval: 90 })
.minorTicks({ interval: 45 });
gauge
.axis()
.startAngle(0)
.fill(null)
.width(2)
.radius(100)
.sweepAngle(360);
gauge.axis().ticks(null);
gauge
.axis()
.labels()
.fontSize(20)
.position('inside')
.format(function () {
if (this.value === 0) return 'N';
if (this.value === 90) return 'E';
if (this.value === 180) return 'S';
if (this.value === 270) return 'W';
return this.value;
});
gauge
.axis(1)
.startAngle(0)
.fill(null)
.width(1)
.radius(50)
.sweepAngle(360);
gauge
.axis(1)
.scale()
.minimum(0)
.maximum(360)
.ticks({ interval: 45 })
.minorTicks({ interval: 15 });
gauge.axis(1).ticks(null);
gauge
.axis(1)
.minorTicks()
.enabled(true)
.length(20)
.stroke('2 ' + darkAccentColor)
.position('outside')
.type(function (path, x, y, radius) {
path
.moveTo(x, y - radius / 2)
.lineTo(x, y + radius / 2)
.close();
return path;
});
gauge
.axis(1)
.labels()
.fontSize(20)
.padding(2)
.position('outside')
.format(function () {
if (
this.value === 0 ||
this.value === 90 ||
this.value === 180 ||
this.value === 270
) { return ''; }
if (this.value === 45) return 'ne';
if (this.value === 135) return 'se';
if (this.value === 225) return 'sw';
if (this.value === 315) return 'nw';
return this.value;
});
makeNeedle(gauge.needle(), 'big');
makeNeedle(gauge.needle(1), 'small');
makeNeedle(gauge.needle(2), 'big');
makeNeedle(gauge.needle(3), 'small');
makeNeedle(gauge.needle(4), 'big');
makeNeedle(gauge.needle(5), 'small');
makeNeedle(gauge.needle(6), 'big');
makeNeedle(gauge.needle(7), 'small');
gauge
.cap()
.radius('10%')
.fill('white')
.stroke('5 ' + darkAccentColor);
gauge.container('container');
gauge.draw();
});
</script>
</body>
</html>
Circular Gauges are charts that intended to represent a real measuring device of circular shape and with circular scale (or scales) like clocks, speedometers, compasses, etc. They might have needle and knob or any other feature that helps to indicate the value on a scale.
This gauge is a simulation of a compass. This sample is an example of our component features: we have created this compass with only needles. There are eight needles, each goes for one of the cardinal and intermediate (intercardinal, ordinal) directions. Each needle is colored half into dark grey and half in white. Two axes represent the inner rosewind with intermediate directions and ticks and the outer rosewind with cardinal directions.