Quick Start
- Getting Started
- Include AnyChart
- Create a Container
- Create the Chart
- See the Chart
- Full Source Code
- Further Steps
Getting Started
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.
Include AnyChart
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 have to use your own link in this case).
<head>
<script src="https://cdn.anychart.com/releases/8.13.0/js/anychart-base.min.js" type="text/javascript"></script>
</head>
Create a Container
Add a block-level HTML element into your page, set the element id, and its width and height.
<body>
<div id="container" style="width: 500px; height: 400px;"></div>
</body>
Create the 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, XML, CSV and many other formats, see Supported Data Formats to learn more.
<script>
anychart.onDocumentLoad(function () {
// create an instance of a pie chart
var chart = anychart.pie();
// set the data
chart.data([
["Chocolate", 5],
["Rhubarb compote", 2],
["Crêpe Suzette", 2],
["American blueberry", 2],
["Buttermilk", 1]
]);
// set chart title
chart.title("Top 5 pancake fillings");
// set the container element
chart.container("container");
// initiate chart display
chart.draw();
});
</script>
See the Chart
After all these steps you should have the following result. Launch and explore basic AnyChart chart or see and launch it below:
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/releases/8.13.0/js/anychart-base.min.js" type="text/javascript"></script>
<script>
anychart.onDocumentLoad(function () {
// create an instance of a pie chart
var chart = anychart.pie();
// set the data
chart.data([
["Chocolate", 5],
["Rhubarb compote", 2],
["Crêpe Suzette", 2],
["American blueberry", 2],
["Buttermilk", 1]
]);
// set chart title
chart.title("Top 5 pancake fillings");
// set the container element
chart.container("container");
// initiate chart display
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
- Explore JavaScript API Reference
- See Playground demos
- Ask for Rhubarb compote filling in your local diner.