Quick Start


Getting started with AnyChart

To get started with AnyChart follow these simple steps and you will get your first web html5 ready chart in a minute.

Create an HTML file and give it the “index.htm” name if you want to make a new web page, or open your HTML file where the chart should be.

1. Include AnyChart into your web page

Reference the JavaScript file in the <head> section of your web page.
You can use the link as shown below or download anychart.min.js from the download page and then put it into any folder of your site (you’ll have to use your own link in this case).

<head>
    <script src="https://cdn.anychart.com/js/latest/anychart.min.js" type="text/javascript"></script>
    <link rel="stylesheet" href="https://cdn.anychart.com/css/latest/anychart-ui.css">
</head>

Note: first link in the snippet above reference AnyChart JS file and the second one reference css file that is required for proper work of AnyChart UI elements including Gantt Toolbar and Context Menu feature.

2. Create a container for the chart

Add a block-level HTML element into your page, set the id, width and height attributes. Unless you don’t, AnyChart charting library will use 100% of the container.

Example:

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

3. Create a chart

Put the JavaScript tag <script> with the following code anywhere in the “head” or “body” section. This code example uses JavaScript API to create a chart, but you also can use JSON or XML format. See Supported Data Formats to learn more about available formats.

Example:

<script>
  anychart.onDocumentLoad(function() {
    // create an instance of a pie chart with data
    var chart = anychart.pie([
      ["Chocolate", 5],
      ["Rhubarb compote", 2],
      ["Crêpe Suzette", 2],
      ["American blueberry", 2],
      ["Buttermilk", 1]
    ]);
    chart.title("Top 5 pancake fillings");
    // pass the container id, chart will be displayed there
    chart.container("container");
    // call the chart draw() method to initiate chart display
    chart.draw();
  });
</script>

The result

See the result

After all these steps you should have the following result. Launch and explore basic AnyChart chart or see and launch it below:

Playground

Full source code

Below this you can see how your full web page code should look like.

<!doctype html>
<head>
    <script src="https://cdn.anychart.com/js/latest/anychart.min.js" type="text/javascript"></script>
    <script>
        anychart.onDocumentLoad(function() {
            // create an instance of pie chart with data
            var chart = anychart.pie([
                ["Chocolate", 5],
                ["Rhubarb compote", 2],
                ["Crêpe Suzette", 2],
                ["American blueberry", 2],
                ["Buttermilk", 1]
            ]);
            chart.title("Top 5 pancake fillings");
            // pass the container where chart will be drawn
            chart.container("container");
            // call the chart draw() method to initiate chart drawing
            chart.draw();
        });
    </script>
</head>
<body>
    <div id="container" style="width: 500px; height: 400px;"></div>
</body>
</html>

Also, you can copy and paste this code to a file on your computer and run it in browser to see how it works.


Further Steps

Learn more

Subscribe

You are looking at an outdated v7 version of this document. Switch to the v8 version to see the up to date information.