Add Charts to Our JavaScript App with Anychart — High-Low, Jump Line, Japanese Candlestick 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.

High-Low (HiLo) Chart

We can create high-low charts easily with Anychart.

To add one, we write:

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

const data = [
  ["January", 1000, 5000],
  ["February", 500, 2000],
  ["March", 3000, 6000],
  ["April", 4000, 19680],
  ["May", 6000, 58581]
];

chart = anychart.hilo();
const series = chart.hilo(data);
chart.title("HiLo Chart");
chart.container("container");
chart.draw();

We add the script tag for the base package.

Then we add the container div for rendering the chart.

data has an array of data.

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

The 2nd value is the low value.

The 3rd value is the high value.

Then we create the high-low chart with anychart.hilo .

chart.hilo creates the series from the data.

chart.title sets the title.

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

chart.draw draws the chart.

Japanese Candlestick Chart

To create a Japanese candlestick chart, we write:

const data = [
  [Date.UTC(2007, 07, 23), 23.55, 23.88, 23.38, 23.62],
  [Date.UTC(2007, 07, 24), 22.65, 23.7, 22.65, 23.36],
  [Date.UTC(2007, 07, 25), 22.75, 23.7, 22.69, 23.44],
  [Date.UTC(2007, 07, 26), 23.2, 23.39, 22.87, 22.92],
  [Date.UTC(2007, 07, 27), 23.98, 24.49, 23.47, 23.49],
];

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

The HTML is the same as the previous example.

We have the date value for the x-axis in the first data array entry.

Then other values are the open, high, low, and close values respectively.

We then create the Japanese candlestick chart with anychart.candlestuck .

chart.candlestick takes the data.

The rest are the same as the previous example.

Jump Line Chart

We can create a jump line chart by writing:

const data = [{
    x: "January",
    value: 10000
  },
  {
    x: "February",
    value: 12000
  },
  {
    x: "March",
    value: 18000
  }
];

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

We have the data array with the x property with the x-axis value,

And value has the y-axis value.

anychart.jumpLine creates the jump line chart.

chart.jumpLine takes the data.

And the rest are the same as the previous examples.

Line Chart

We can add a line chart with the base Anychart package.

To add one, write:

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

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

We have the data array with the x and y-axis values respectively in each array entry.

Then we call anychart.line to create the line chart.

chart.line sets the data for the line chart.

And the rest are the same as the previous examples.

Conclusion

We can add high-low, jump line, Japanese candlestick, and line charts easily with Anychart.