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

Sparkline

We can create a sparkling easily with Anycharts.

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>
<script src="https://cdn.anychart.com/releases/8.9.0/js/anychart-sparkline.min.js"></script>

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

Then we add the following JavaScript code:

const stage = anychart.graphics.create('container');
const chart = anychart.sparkline();
chart.container(stage);
chart.data([1.1371, 1.1341, 1.1132, 1.1381, 1.1371]);
chart.bounds(0, 0, 90, 20);
chart.draw();

We add the script tags for the Anychart base package the sparkline package.

Then we add the div which will be used as the container element for rendering the sparkline in.

Next, we create the stage object with the anychart.graphics.create method.

We pass in the ID for the container element to render the sparkline in.

Then we call anychart.sparkline to create the sparkline.

And we add that to the stage by calling chart.container .

chart.data sets the data for the chart.

chart.bounds sets the top left and bottom right corners of the sparkline respectively.

The numbers are in pixels.

chart.draw draws the sparkline.

Spline Area Chart

We can add a spline area chart 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>

And the following JavaScript code:

const data = [{
    x: "January",
    value: 43
  },
  {
    x: "February",
    value: 46
  },
  {
    x: "March",
    value: 12
  },
  {
    x: "April",
    value: 65
  },
  {
    x: "May",
    value: 71
  }
];

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

We only need the Anychart base package to create the spline area chart.

The container div is the same as the previous example.

Next, we create the data array with the data for our chart.

x has the x-axis values.

value has the y-axis values.

anychart.area creates the area chart.

chart.splineArea adds the spline area chart with the data.

The rest of the code is the same as the previous example.

Spline Chart

We can create a spline chart with the anychart.line method.

For instance, we can write:

const data = [{
    x: "January",
    value: 43
  },
  {
    x: "February",
    value: 46
  },
  {
    x: "March",
    value: 12
  },
  {
    x: "April",
    value: 65
  },
  {
    x: "May",
    value: 71
  }
];

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

We call anychart.line to create the line chart.

Then we create the spline chart with chart.spline .

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

Conclusion

We can create sparklines, spline charts, and spline area charts with Anychart.