Add Charts to Our JavaScript App with Anychart — Step Area Charts, Step Line Charts, Stick Charts, and Sunburst 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.

Step Area Chart

We can create a step area chart 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>

Then we write the following JavaScript code:

const data = [{
    x: "1995",
    value: 0.10
  },
  {
    x: "1996",
    value: 0.10
  },
  {
    x: "1997",
    value: 0.12
  },
  {
    x: "1998",
    value: 0.13
  },
  {
    x: "1999",
    value: 0.15
  },
];

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

We add the Anychart base package with the script tag.

Then we add a div which is used as the container for the chart.

Next, we add the data array with the x and value properties in each entry.

x has the x-axis value.

value has y-axis value.

anychart.area creates the area chart.

chart.stepArea creates the step area chart with our data.

series.stepDirection sets the direction of the steps.

chart.container sets the ID for the container element for the chart.

chart.draw draws the chart.

Step Line Chart

We can create step line charts in a similar way.

For instance, we can write:

const data = [{
    x: "1995",
    value: 0.10
  },
  {
    x: "1996",
    value: 0.10
  },
  {
    x: "1997",
    value: 0.12
  },
  {
    x: "1998",
    value: 0.13
  },
  {
    x: "1999",
    value: 0.15
  },
];

const chart = anychart.stepLine();
const series = chart.stepLine(data);
series.stepDirection("forward");
chart.container("container");
chart.draw();

The data is the same as the previous example.

anychart.stepLine creates the step line chart.

chart.stepLine sets the data.

The rest of the code is the same as the step area chart example.

Stick Chart

We can create a stick easily with Anychart.

To add it, we write:

const data = [{
    x: "1995",
    value: 0.10
  },
  {
    x: "1996",
    value: 0.10
  },
  {
    x: "1997",
    value: 0.12
  },
  {
    x: "1998",
    value: 0.13
  },
  {
    x: "1999",
    value: 0.15
  },
];

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

We call anychart.stick to create the stick chart.

chart.stick creates the stick chart with our data.

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

Sunburst Chart

We can create a sunburst chart with Anychart.

To do this, we write:

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

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

to add the Anychart base and sunburst chart packages and the container div.

Then we write:

const data = [{
  name: "Company A",
  children: [{
      name: "Technical",
      children: [{
          name: "Architects"
        },
        {
          name: "Developers"
        },
      ]
    },
    {
      name: "Sales",
      children: [{
          name: "Analysts"
        },
        {
          name: "Executives"
        }
      ]
    },
    {
      name: "HR"
    },
  ]
}];

const chart = anychart.sunburst(data, "as-tree");
chart.container("container");
chart.draw();

to add the data and the chart.

data has the name and children properties to add the name of the segment and the children segment contents respectively.

Then we call anychart.sunburst to create the sunburst chart with the data .

'as-tree' lets us display the data in the chart as a tree structure.

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

Conclusion

We can add step area charts, step line charts, stick charts, and sunburst charts easily with Anycharts.