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.
Open-High-Low-Close (OHLC) Chart
We can add an OHLC 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>
<div id="container" style="width: 500px; height: 400px;"></div>
<script>
const data = [
[Date.UTC(2020, 07, 23), 23.55, 23.88, 23.38, 23.62],
[Date.UTC(2020, 07, 24), 22.65, 23.7, 22.65, 23.36],
[Date.UTC(2020, 07, 25), 22.75, 23.7, 22.69, 23.44],
[Date.UTC(2020, 07, 26), 23.2, 23.39, 22.87, 22.92],
[Date.UTC(2020, 07, 27), 23.98, 24.49, 23.47, 23.49]
];
const chart = anychart.ohlc();
const series = chart.ohlc(data);
chart.container("container");
chart.draw();
</script>
</body>
</html>
We add the script tag for adding the Anychart base package.
And then we add a div for rendering the chart inside.
Next, we create the data array with the date and the open, high, low, and close data in this order.
And then we call anychart.ohlc to create the chart.
Next, we call chart.ohlc to set the chart data.
chart.container lets us set the ID of the chart container element.
And chart.draw draws the chart in the container element.
Pareto Chart
To add a Pareto chart, 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-pareto.min.js"></script>
<div id="container" style="width: 500px; height: 400px;"></div>
<script>
const chart = anychart.pareto([
{ x: "apple", value: 19 },
{ x: "orange", value: 9 },
{ x: "grape", value: 28 }
]);
chart.container("container");
chart.draw();
</script>
</body>
</html>
We call anychart.pareto with the data we want to render.
x has the x-axis value.
value has the y-axis value.
The rest of the code is the same as the other charts.
We’ve to add the pareto package to render a Pareto chart.
Pie Chart
We can add a pie 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>
<div id="container" style="width: 500px; height: 400px;"></div>
<script>
const data = [
{ x: "A", value: 677 },
{ x: "B", value: 243 },
{ x: "C", value: 431 }
];
const chart = anychart.pie(data);
chart.container("container");
chart.draw();
</script>
</body>
</html>
We create the data array with the pie chart values.
x has pie labels.
value has the pie chunk values.
We pass the data array into anychart.pie to create the chart.
And we draw them the same way as the previous examples.
We can set the fill and outline color of the pie chunks with fill and stroke respectively:
<!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 = [
{ x: "A", value: 677 },
{ x: "B", value: 243 },
{ x: "C", value: 431 }
];
const chart = anychart.pie(data);
chart.normal().fill("#669999", 0.5);
chart.hovered().fill("#666699", 0.5);
chart.selected().fill("#666699", 0.7);
chart.normal().stroke("#669999", 2);
chart.hovered().stroke("#669999", 2);
chart.container("container");
chart.draw();
</script>
</body>
</html>
Conclusion
We can create OHLC, Pareto charts and pie charts easily with Anychart.
