Categories
JavaScript

Add Charts to Our JavaScript App with Anychart — Open-High-Low-Close, Pie, and Pareto Charts

Spread the love

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.

Open-High-Low-Close (OHLC) Chart

We can add an OHLC chart easily with Anychart.

For instance, we can write:

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>chart</title>
  </head>
  <body>
    <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>
    <script>
      const data = [
        [Date.UTC(2020, 07, 23), 23.55, 23.88, 23.38, 23.62],
        [Date.UTC(2020, 07, 24), 22.65, 23.7, 22.65, 23.36],
        [Date.UTC(2020, 07, 25), 22.75, 23.7, 22.69, 23.44],
        [Date.UTC(2020, 07, 26), 23.2, 23.39, 22.87, 22.92],
        [Date.UTC(2020, 07, 27), 23.98, 24.49, 23.47, 23.49]
      ];

      const chart = anychart.ohlc();
      const series = chart.ohlc(data);
      chart.container("container");
      chart.draw();
    </script>
  </body>
</html>

We add the script tag for adding the Anychart base package.

And then we add a div for rendering the chart inside.

Next, we create the data array with the date and the open, high, low, and close data in this order.

And then we call anychart.ohlc to create the chart.

Next, we call chart.ohlc to set the chart data.

chart.container lets us set the ID of the chart container element.

And chart.draw draws the chart in the container element.

Pareto Chart

To add a Pareto chart, we write:

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>chart</title>
  </head>
  <body>
    <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-pareto.min.js"></script>
    <div id="container" style="width: 500px; height: 400px;"></div>
    <script>
      const chart = anychart.pareto([
        { x: "apple", value: 19 },
        { x: "orange", value: 9 },
        { x: "grape", value: 28 }
      ]);
      chart.container("container");
      chart.draw();
    </script>
  </body>
</html>

We call anychart.pareto with the data we want to render.

x has the x-axis value.

value has the y-axis value.

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

We’ve to add the pareto package to render a Pareto chart.

Pie Chart

We can add a pie chart with Anychart.

For instance, we can write:

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>chart</title>
  </head>
  <body>
    <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>
    <script>
      const data = [
        { x: "A", value: 677 },
        { x: "B", value: 243 },
        { x: "C", value: 431 }
      ];
      const chart = anychart.pie(data);
      chart.container("container");
      chart.draw();
    </script>
  </body>
</html>

We create the data array with the pie chart values.

x has pie labels.

value has the pie chunk values.

We pass the data array into anychart.pie to create the chart.

And we draw them the same way as the previous examples.

We can set the fill and outline color of the pie chunks with fill and stroke respectively:

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>chart</title>
  </head>
  <body>
    <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>
    <script>
      const data = [
        { x: "A", value: 677 },
        { x: "B", value: 243 },
        { x: "C", value: 431 }
      ];
      const chart = anychart.pie(data);
      chart.normal().fill("#669999", 0.5);
      chart.hovered().fill("#666699", 0.5);
      chart.selected().fill("#666699", 0.7);
      chart.normal().stroke("#669999", 2);
      chart.hovered().stroke("#669999", 2);
      chart.container("container");
      chart.draw();
    </script>
  </body>
</html>

Conclusion

We can create OHLC, Pareto charts and pie charts easily with Anychart.

Leave a Reply

Your email address will not be published. Required fields are marked *