AnyChart Documentation
Still have questions?
Contact support
Still have questions?
Contact support

© 2024 AnyChart.Com All rights reserved.

Quick Start

Modules

The Circular Gauge requires adding the Core and Circular Gauge modules. Reference two JavaScript files in the <head> section of your web page: 

<head>
  <script src="https://cdn.anychart.com/releases/8.13.0/js/anychart-core.min.js" type="text/javascript"></script>
  <script src="https://cdn.anychart.com/releases/8.13.0/js/anychart-circular-gauge.min.js" type="text/javascript"></script>
</head>

To create a Linear Gauge, add the Core and Linear Gauge modules:

<head>
  <script src="https://cdn.anychart.com/releases/8.13.0/js/anychart-core.min.js" type="text/javascript"></script>
  <script src="https://cdn.anychart.com/releases/8.13.0/js/anychart-linear-gauge.min.js" type="text/javascript"></script>
</head>

Note: These files can be downloaded from the AnyChart download page.

Learn more: Modules.

Create a Container

Add a block-level HTML element to your page and set the id, width and height attributes (when they are not set, AnyChart uses 100% of the container):

<body>
    <div id="container" style="width: 500px; height: 400px;"></div>
</body>

Prepare the Data

AnyChart provides quite a few opportunities to work with data, so you need to prepare your data before usage. A raw data set for a circular gauge chart may look like this:

dataSet = anychart.data.set([81,34.5]);

Creating the Chart

Add the <script> tag with the following code to any place in the page (in this sample, JavaScript API is used to create a chart, but you can also use JSON or XML format):

<script>
anychart.onDocumentReady(function () {
 
  //create data set on our data
  dataSet = anychart.data.set([81, 34.5]);
 
  // chart type
  gauge = anychart.circularGauge();
 
  //set series padding
  gauge.data(dataSet).padding('4%');
 
  //set axis scale settings
  var scale = gauge.axis().scale();
  scale.minimum(0)
      .maximum(100)
      .ticks()
      .interval(10);
 
  //set major axis ticks
  var axis = gauge.axis();
  axis.ticks()
      .enabled(true)
      .fill('white')
      .stroke('#888')
      .type('trapezoid')
      .length(20);
 
  //set minor axis ticks
  axis.minorTicks()
      .enabled(true)
      .fill('white')
      .stroke('#ccc')
      .type('trapezoid')
      .length(10);
 
  //set the look of the bar that presents data
  gauge.bar(0)
      .position('i')
      .fill('#F0673B .9')
      .stroke('#F0673B')
      .radius(65);
 
  // draw chart
  gauge.container('container').draw();
});
</script>

See the Chart

Here is the result all these steps lead to:

Playground

Full Source Code

The sample above can be launched and explored in AnyChart PlayGround. You can also copy this code to a file on your computer and open it in your browser to display the gauge:

<!doctype html>
<html>
<head>
  <script src="https://cdn.anychart.com/releases/8.13.0/js/anychart-core.min.js" type="text/javascript"></script>
  <script src="https://cdn.anychart.com/releases/8.13.0/js/anychart-circular-gauge.min.js" type="text/javascript"></script>
  <style>
    html, body, #container {
      width: 100%;
      height: 100%;
      margin: 0;
      padding: 0;
    }
  </style>
</head>
<body>
    <div id="container"></div>
    <script type="text/javascript">
      anychart.onDocumentReady(function () {
       
        //create data set on our data
        dataSet = anychart.data.set([81, 34.5]);
       
        // chart type
        gauge = anychart.circularGauge();
       
        //set series padding
        gauge.data(dataSet).padding('4%');
       
        //set axis scale settings
        var scale = gauge.axis().scale();
        scale.minimum(0)
            .maximum(100)
            .ticks()
            .interval(10);
       
        //set major axis ticks
        var axis = gauge.axis();
        axis.ticks()
            .enabled(true)
            .fill('white')
            .stroke('#888')
            .type('trapezoid')
            .length(20);
       
        //set minor axis ticks
        axis.minorTicks()
            .enabled(true)
            .fill('white')
            .stroke('#ccc')
            .type('trapezoid')
            .length(10);
       
        //set the look of the bar that presents data
        gauge.bar(0)
            .position('i')
            .fill('#F0673B .9')
            .stroke('#F0673B')
            .radius(65);
       
        // draw chart
        gauge.container('container').draw();
      });
    </script>
</body>
</html>