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.
Marker Chart
We can create a marker chart by writing the following code:
<!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>
<div id="container" style="width: 500px; height: 400px;"></div>
<script>
const data = [
["2000", 1100],
["2001", 880],
["2002", 1100],
["2003", 1500],
["2004", 921]
];
const chart = anychart.cartesian();
chart.marker(data);
chart.container("container");
chart.draw();
</script>
</body>
</html>
We have the data in the data array.
Each entry has the x-axis value as the first value and y-axis values as the 2nd value.
anychart.cartesian creates the marker chart.
chart.marker sets the data.
chart.container sets the ID of the container element to render the chart in.
And chart.draw draws the chart.
We can set the size of the markers with the size method:
<!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>
<div id="container" style="width: 500px; height: 400px;"></div>
<script>
const data = [
["2000", 1100],
["2001", 880],
["2002", 1100],
["2003", 1500],
["2004", 921]
];
const chart = anychart.cartesian();
const series = chart.marker(data);
series.normal().size(10);
series.hovered().size(15);
series.selected().size(15);
chart.container("container");
chart.draw();
</script>
</body>
</html>
We can set the markets to a different shape with the type method:
<!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>
<div id="container" style="width: 500px; height: 400px;"></div>
<script>
const data = [
["2000", 1100],
["2001", 880],
["2002", 1100],
["2003", 1500],
["2004", 921]
];
const chart = anychart.cartesian();
const series = chart.marker(data);
series.normal().type("star4");
series.hovered().type("star5");
series.selected().type("star6");
chart.container("container");
chart.draw();
</script>
</body>
</html>
Network Graph
We can add a network graph 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-graph.min.js"></script>
<div id="container" style="width: 500px; height: 400px;"></div>
<script>
const data = {
nodes: [
{ id: "Richard" },
{ id: "Larry" },
{ id: "Marta" },
{ id: "Jane" },
{ id: "Norma" }
],
edges: [
{ from: "Richard", to: "Larry" },
{ from: "Richard", to: "Marta" },
{ from: "Larry", to: "Marta" },
{ from: "Marta", to: "Jane" },
{ from: "Jane", to: "Norma" },
{ from: "Brett", to: "Frank" }
]
};
const chart = anychart.graph(data);
chart.container("container");
chart.draw();
</script>
</body>
</html>
We add the Anychart graph module with the 2nd script tag.
Then we add the data array to add the data.
We define the nodes in the nodes array.
And we define how they’re connected with the edges array.
from is the node to connect from and to is the node to connect to.
Then we just pass the data to anychart.graph and draw it like any other kind of chart.
Conclusion
We can add marker charts and network graphs with Anychart.
