- Chart Gallery
- Circular Gauges
- Spectrum
Spectrum
{
"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": 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",
"fill": "none",
"stroke": "none",
"startAngle": 0,
"circularPadding": "10%",
"encloseWithStraightLine": false,
"sweepAngle": 360,
"defaultPointerType": "needle",
"data": [
0,
30,
60,
90,
120,
150,
180,
210,
240,
270,
300,
330
],
"interactivity": {
"spotRadius": 2,
"multiSelectOnClick": false,
"unselectOnClickOutOfPoint": true,
"hoverMode": "single",
"selectionMode": "multi-select"
},
"axes": [
{
"zIndex": 10,
"enabled": true,
"fill": "#CECECE",
"overlapMode": "no-overlap",
"startAngle": null,
"width": "0.1%",
"radius": "77.5%",
"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": 30
},
"minorTicks": {
"mode": "linear",
"base": 0,
"allowFractional": true,
"interval": 10
},
"stackMode": "none",
"stackDirection": "direct",
"stickToZero": true,
"comparisonMode": "none"
},
"ticks": {
"zIndex": 10,
"enabled": true,
"length": "2%",
"type": "line",
"stroke": "none",
"fill": "#545f69",
"hatchFill": "none",
"position": "inside"
},
"minorTicks": {
"zIndex": 10,
"enabled": true,
"length": "1.5%",
"type": "line",
"stroke": "none",
"fill": "#ddd",
"hatchFill": "none",
"position": "inside"
},
"labels": {
"zIndex": 10.00004,
"enabled": true,
"useHtml": true,
"format": "{%Value}°"
},
"minorLabels": {
"zIndex": 10.00004,
"enabled": false
}
}
],
"pointers": [
{
"zIndex": 40,
"enabled": true,
"stroke": "none",
"fill": "#FD0023",
"hatchFill": "none",
"axisIndex": 0,
"pointerType": "marker",
"size": "8%",
"position": "outside",
"radius": "92%",
"type": "triangle-down"
},
{
"zIndex": 40.0001,
"enabled": true,
"stroke": "none",
"fill": "#FF3E0F",
"hatchFill": "none",
"axisIndex": 0,
"pointerType": "marker",
"size": "8%",
"position": "outside",
"radius": "92%",
"type": "triangle-down"
},
{
"zIndex": 40.0002,
"enabled": true,
"stroke": "none",
"fill": "#FF7C00",
"hatchFill": "none",
"axisIndex": 0,
"pointerType": "marker",
"size": "8%",
"position": "outside",
"radius": "92%",
"type": "triangle-down"
},
{
"zIndex": 40.0003,
"enabled": true,
"stroke": "none",
"fill": "#FFDC00",
"hatchFill": "none",
"axisIndex": 0,
"pointerType": "marker",
"size": "8%",
"position": "outside",
"radius": "92%",
"type": "triangle-down"
},
{
"zIndex": 40.0004,
"enabled": true,
"stroke": "none",
"fill": "#BAFF01",
"hatchFill": "none",
"axisIndex": 0,
"pointerType": "marker",
"size": "8%",
"position": "outside",
"radius": "92%",
"type": "triangle-down"
},
{
"zIndex": 40.0005,
"enabled": true,
"stroke": "none",
"fill": "#32FF02",
"hatchFill": "none",
"axisIndex": 0,
"pointerType": "marker",
"size": "8%",
"position": "outside",
"radius": "92%",
"type": "triangle-down"
},
{
"zIndex": 40.0006,
"enabled": true,
"stroke": "none",
"fill": "#13FF80",
"hatchFill": "none",
"axisIndex": 0,
"pointerType": "marker",
"size": "8%",
"position": "outside",
"radius": "92%",
"type": "triangle-down"
},
{
"zIndex": 40.0007,
"enabled": true,
"stroke": "none",
"fill": "#01F2FF",
"hatchFill": "none",
"axisIndex": 0,
"pointerType": "marker",
"size": "8%",
"position": "outside",
"radius": "92%",
"type": "triangle-down"
},
{
"zIndex": 40.0008,
"enabled": true,
"stroke": "none",
"fill": "#1352FF",
"hatchFill": "none",
"axisIndex": 0,
"pointerType": "marker",
"size": "8%",
"position": "outside",
"radius": "92%",
"type": "triangle-down"
},
{
"zIndex": 40.0009,
"enabled": true,
"stroke": "none",
"fill": "#5201FF",
"hatchFill": "none",
"axisIndex": 0,
"pointerType": "marker",
"size": "8%",
"position": "outside",
"radius": "92%",
"type": "triangle-down"
},
{
"zIndex": 40.001,
"enabled": true,
"stroke": "none",
"fill": "#E001FF",
"hatchFill": "none",
"axisIndex": 0,
"pointerType": "marker",
"size": "8%",
"position": "outside",
"radius": "92%",
"type": "triangle-down"
},
{
"zIndex": 40.0011,
"enabled": true,
"stroke": "none",
"fill": "#FE00A3",
"hatchFill": "none",
"axisIndex": 0,
"pointerType": "marker",
"size": "8%",
"position": "outside",
"radius": "92%",
"type": "triangle-down"
}
],
"ranges": [
{
"zIndex": 10,
"enabled": true,
"fill": {
"keys": [
{
"color": "#FE0024",
"offset": 0
},
{
"color": "#FF6800",
"offset": 0.14285714285714285
},
{
"color": "#FFFF01",
"offset": 0.2857142857142857
},
{
"color": "#26FF02",
"offset": 0.42857142857142855
},
{
"color": "#00FFFF",
"offset": 0.5714285714285714
},
{
"color": "#1C01FF",
"offset": 0.7142857142857143
},
{
"color": "#FF00FE",
"offset": 0.8571428571428571
},
{
"color": "#FE0024",
"offset": 1
}
],
"angle": 0,
"mode": false,
"opacity": 1
},
"axisIndex": 0,
"position": "center",
"startSize": "17%",
"endSize": "17%",
"from": 0,
"to": 360,
"radius": "85%",
"cornersRounding": "0%"
}
]
}
}
<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>
anychart.onDocumentReady(function() {
// set chart theme
anychart.theme('wines');
// set the gauge type
var data = [0, 30, 60, 90, 120, 150, 180, 210, 240, 270, 300, 330];
var palette = anychart.palettes
.distinctColors()
.items([
'#FD0023',
'#FF3E0F',
'#FF7C00',
'#FFDC00',
'#BAFF01',
'#32FF02',
'#13FF80',
'#01F2FF',
'#1352FF',
'#5201FF',
'#E001FF',
'#FE00A3'
]);
var gauge = anychart.gauges.circular(data);
gauge.fill(null).stroke(null);
function createMarker(i) {
var marker = gauge.marker(i);
marker
.fill(palette.itemAt(i))
.size(8)
.position('outside')
.type('triangle-down')
.radius(92)
.stroke(null);
}
for (var i = 0; i < data.length; i++) {
createMarker(i);
}
// get range
var range = gauge.range();
range
.from(0)
.to(360)
.startSize('17%')
.endSize('17%')
.radius(85)
.zIndex(10)
.fill([
'#FE0024',
'#FF6800',
'#FFFF01',
'#26FF02',
'#00FFFF',
'#1C01FF',
'#FF00FE',
'#FE0024'
]);
// axis settings
var axis = gauge.axis(0);
axis.radius(77.5).width(0.1);
axis.labels().useHtml(true).format('{%Value}°');
// scale settings
axis
.scale()
.minimum(0)
.maximum(360)
.ticks({ interval: 30 })
.minorTicks({ interval: 10 });
// ticks settings
axis.ticks().enabled(true).length('2').position('inside');
// minor ticks settings
axis
.minorTicks()
.enabled(true)
.length('1.5')
.fill('#ddd')
.position('inside');
// set container id for the chart
gauge.container('container');
// initiate chart drawing
gauge.draw();
});
</script>
</body>
</html>
Circular Gauges are usually used as simulators of real gauges like speedometers, tuners or watches. These charts look like gauges of a circular shape with radial scale, which can have several axes with or without a needle or marker pointing at the value.
This Chart demonstrates how a gauge axis can be colored with an array of colors. The axis labels are enabled and displayed for the major ticks each 30°.