Archive for the JavaScript chart tutorials

How to Create a JavaScript Area Chart October 28th, 2017 by Timothy Loginov

How to Create a JavaScript Area Chart and Customize ItWant to know how to build a JavaScript area chart? This article will show you how to do that and tell you who invented area charts in the late 18th century.

The area chart is one of the basic charts used to show changes in data over time. The key feature of this chart type is a colored area between the horizontal X-axis and the line marking the changing value. It can be filled with a color, gradient color, or with a hatch fill.

Look at the chart on the title image. That’s the data visualization being created along the tutorial. Such a JavaScript-based area chart will be interactive and good-looking in any browser, on any website and in any app in HTML5. All samples used in the article are available in our collection on CodePen.

Read the JS charting tutorial »


Creating a JavaScript Bar Chart October 25th, 2017 by Timothy Loginov

How to create a JavaScript bar chart: TutorialHow to create a JavaScript bar chart and why is this important? Every day, data visualization becomes all the more powerful and important area of the Web. The volume of information grows, and it must be made understandable as fast as possible. That’s when data visualization instruments like charts and dashboards become a great help.

Creating HTML5 charts might seem a complicated task, but this assumption is wrong. This article blows this prejudice to pieces and shows how to build an interactive bar chart using JavaScript.

The result will look like on the picture above. Then you’ll also learn how to quickly modify and customize such a JavaScript (HTML5) bar chart. All the JS chart examples used along the tutorial can be found on CodePen.

Read the JS charting tutorial »