Gordon  Taylor

Gordon Taylor

1620727800

Add Charts to Our JavaScript App with Anychart — Bubble, Bullet, and Column Charts

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.

Bubble Charts

We can create bubble charts easily with Anychart.

For instance, we can write the following HTML:

<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>

Then we can write the following JavaScript code:

const chart = anychart.cartesian();
const data = [
  ["2000", 1100, 1],
  ["2001", 880, 2],
  ["2002", 1100, 5],
  ["2003", 1500, 3],
  ["2004", 921, 3],
];
chart.bubble(data);
chart.title("Bubble Chart");
chart.xAxis().title("Years");
chart.yAxis().title("Sales");
chart.container("container");
chart.draw();

The script tag is for adding the Anychart library.

The div is the container for rendering the chart.

anychart.cartesian lets us create a chart.

The data is in the data array.

#javascript #technology #programming

Add Charts to Our JavaScript App with Anychart — Bubble, Bullet, and Column Charts