Add Charts to Our JavaScript App with Anychart — Donut, Error, and Heat Map 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.

Doughnut Chart

We can add a doughnut chart into our web app 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 add the following JavaScript:

const data = [{
    x: "A",
    value: 30
  },
  {
    x: "B",
    value: 53
  },
  {
    x: "C",
    value: 34
  },
];

const chart = anychart.pie(data);
chart.innerRadius("30%");
chart.container("container");
chart.draw();

We add the base Anychart package with the script tag.

Then we add the div for rendering the chart in.

In the JavaScript code, we add the data for the chart with the data array.

anychart.pie lets us create the donut chart.

chart.innerRadius lets us add a role with the radius being the given percentage.

chart.container sets the ID of the container element to render the chart in.

chart.draw draws the chart.

Error Chart

We can create an error chart with the series.error method.

For instance, we can write:

const data = [
  ["January", 10000],
  ["February", 12000],
  ["March", 13000],
];

const chart = anychart.column();
const series = chart.column(data);
series.error("10%");
chart.container("container");
chart.draw();

We have the data for our chart.

Then we create our column chart with anychart.column .

And we add the error bar to it with the series.error method.

This will make the error bar display on the column.

We can add error bars to area charts,. bar charts, line charts, scatter charts, stick charts, and more.

Funnel Chart

We can add a funnel chart with the following HTML:

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

We need the funnel-pyramid package to add the chart.

The rest of the HTML is the same as the other examples.

Then we add the funnel chart by writing:

const data = [
  ["apple", 2320],
  ["orange", 940],
  ["grape", 490],
];

const chart = anychart.funnel(data);
chart.container("container");
chart.draw();

We call anychart.funnel to create the funnel chart.

And call chart.container to set the ID of the container to render the chart in.

Heat Map Chart

To create a heat map chart, we write the following HTML:

<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-heatmap.min.js"></script>

<div id="container" style="width: 500px; height: 400px;"></div>

We need to add the heatmap package to let us create a heat map chart.

Then we write the following JavaScript code:

const data = [{
    x: "2010",
    y: "A",
    heat: 15
  },
  {
    x: "2011",
    y: "A",
    heat: 17
  },
  {
    x: "2012",
    y: "A",
    heat: 21
  },
  {
    x: "2010",
    y: "B",
    heat: 34
  },
  {
    x: "2011",
    y: "B",
    heat: 33
  },
  {
    x: "2012",
    y: "B",
    heat: 32
  },
];

const chart = anychart.heatMap(data);
chart.container("container");
chart.draw();

data has objects with the x and y labels. heat is the value of the given x and y locations.

anychart.heatMap lets us create the chart.

Conclusion

We can add donut charts, error charts, and heat map charts easily with Anychart.