Anychart is an easy to use library that lets us add chart into our JavaScript web app.
In this article, we’ll look at how to create basic charts with Anychart.
Polar Chart
We can add a polar chart with Anychart.
For instance, we can write:
<!DOCTYPE html>
<html lang="en">
<head>
<title>chart</title>
</head>
<body>
<script
src="https://cdn.anychart.com/releases/8.9.0/js/anychart-base.min.js"
type="text/javascript"
></script>
<script src="https://cdn.anychart.com/releases/8.9.0/js/anychart-polar.min.js"></script>
<div id="container" style="width: 500px; height: 400px;"></div>
<script>
const data = [
["Strength", 8],
["Dexterity", 14],
["Concentration", 14],
["Intelligence", 15],
["Wisdom", 12]
];
const chart = anychart.polar();
const series = chart.polygon(data);
chart.xScale("ordinal");
chart.sortPointsByX(true);
chart.innerRadius(50);
chart.container("container");
chart.draw();
</script>
</body>
</html>
We add the script tags for the Anychart based package and the polar chart package.
Then we define the data array with the description and their values.
anychart.polar creates the polar chart.
chart.polygon sets the data for the cart.
chart.xScale sets the scale for the x-axis.
chart.innerRadius sets the inner radius for the chart.
chart.container sets the ID for the container to render the chart in.
chart.draw draws the chart.
Polyline Chart
A polyline chart is like a polar chart except that the polygon is hollow inside.
To add it, we write:
<!DOCTYPE html>
<html lang="en">
<head>
<title>chart</title>
</head>
<body>
<script
src="https://cdn.anychart.com/releases/8.9.0/js/anychart-base.min.js"
type="text/javascript"
></script>
<script src="https://cdn.anychart.com/releases/8.9.0/js/anychart-polar.min.js"></script>
<div id="container" style="width: 500px; height: 400px;"></div>
<script>
const data = [
["Strength", 8],
["Dexterity", 14],
["Concentration", 14],
["Intelligence", 15],
["Wisdom", 12]
];
const chart = anychart.polar();
const series = chart.polyline(data);
chart.xScale("ordinal");
chart.sortPointsByX(true);
chart.innerRadius(50);
chart.container("container");
chart.draw();
</script>
</body>
</html>
The difference from the previous example is that we call chart.polyline instead of chart.polygon .
And we call sortPointsByX to sort the points by the x-axis values.
Pyramid Chart
We can add a pyramid chart easily with Anychart.
For instance, we can write:
<!DOCTYPE html>
<html lang="en">
<head>
<title>chart</title>
</head>
<body>
<script
src="https://cdn.anychart.com/releases/8.9.0/js/anychart-base.min.js"
type="text/javascript"
></script>
<script src="https://cdn.anychart.com/releases/8.9.0/js/anychart-pyramid-funnel.min.js"></script>
<div id="container" style="width: 500px; height: 400px;"></div>
<script>
const chart = anychart.pyramid([
{ name: "apple", value: 490 },
{ name: "orange", value: 435 },
{ name: "grape", value: 566 },
{ name: "banana", value: 324 },
{ name: "pear", value: 455 }
]);
chart.container("container");
chart.draw();
</script>
</body>
</html>
We add the pyramid package with the 2nd script tag.
Then we call anychart.pyramid with the chart data.
The value property is used to determine the size of the pyramid.
name is the label.
Then the rest are the same as the other charts.
Conclusion
We can add polar, polyline, and pyramid charts easily with Anychart.
