Add Charts to Our JavaScript App with Anychart — Area, Bar, and Box 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.

Area Chart

We can add area charts with Anychart.

To add one, we 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>

And the following JavaScript code:

const data = [
  ["January", 100],
  ["February", 120],
  ["March", 180],
  ["April", 110],
  ["May", 90]
];

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

We add the Anychart base package with the script tag.

The div is the container for rendering the chart.

The JavaScript code has the data array with the data.

The first value of each entry is the x-axis value.

And the 2nd value is the y-axis value.

Then we call anychart,area to create the area chart.

chart.area takes the data.

chart.container sets the id value of the container to render the chart in.

And chart.draw draws the chart.

We can change the series fill color with the normal , hovered , and selected methods:

const data = [
  ["January", 100],
  ["February", 120],
  ["March", 180],
  ["April", 110],
  ["May", 90]
];

chart = anychart.area();
const series = chart.area(data);
series.normal().fill("#00cc99", 0.3);
series.hovered().fill("#00cc99", 0.1);
series.selected().fill("#00cc99", 0.5);
chart.container("container");
chart.draw();

Then we see the color when the chart series is hovered over or selected.

Bar Chart

We can add bar charts with Anychart.

To add a bar chart, we call the chart.bar method:

const data = [
  ["January", 100],
  ["February", 120],
  ["March", 180],
  ["April", 110],
  ["May", 90]
];

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

anychart.bar creates the chart.

chart.bar adds the data for the bar chart.

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

And chart.draw draws the chart.

The HTML is the same as the previous example.

We can also set the fill color the same way.

Box Chart

To create a box chart, we write:

const data = [{
    x: "1",
    low: 1000,
    q1: 1050,
    median: 1200,
    q3: 1800,
    high: 2000,
    outliers: [800, 2500, 3200]
  },
  {
    x: "2",
    low: 2500,
    q1: 3000,
    median: 3800,
    q3: 3900,
    high: 4000
  },
  {
    x: "3",
    low: 2000,
    q1: 2300,
    median: 2500,
    q3: 2900,
    high: 3000
  },
  {
    x: "4",
    low: 4000,
    q1: 5000,
    median: 6500,
    q3: 6500,
    high: 7000,
    outliers: [8930]
  },
  {
    x: "5",
    low: 8000,
    q1: 8400,
    median: 8500,
    q3: 8800,
    high: 9000,
    outliers: [6950, 3000]
  }
];

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

low is the low value.

q1 has the 1st quantile value.

median has the median value.

q3 has the 3rd quantile value.

high has the highest value.

outliers has the outlier values.

Then we create the box chart with the anychart.box method.

chart.box takes the data for rendering the chart.

Conclusion

We can create area charts, bar charts, and box charts easily with Anychart.