Interactive JavaScript Charts for Data Visualization.

Use this code

new Contour({ el: '#chart' })
.cartesian()
.watermark('Draw Me')
.drawable(data)
.column(data)
.render();
                            


What is Contour?

Forio Contour lets you create data visualizations easily, based on intuitive abstractions commonly used in charts and graphs. Contour provides a core set of common visualizations that you can see in our gallery, and it’s easy to extend if you want to add your own customizations.

Forio Contour provides a core set of common visualizations that you can see in the gallery, and it's easy to extend if you want to add your own customizations. Plus, it's free and open source.

A big part of our work at Forio involves creating data visualizations for models and simulations. While many excellent plotting and graphing libraries already exist, we decided to take what we’ve learned over nearly a decade of data visualization work and create our own. Read more about our motivation and design goals for Contour.

Forio Contour uses the popular D3 engine and adds a set of intuitive abstractions so you can easily create graphs and charts.

Simple, yet powerful


new Contour({ el: '.myContourChart' })
.cartesian()
.column(data)
.render();
                            

One of the best parts about Contour is how easy it is to get started. Simply by writing the code above, you can have a column chart, that was easy.

Flexible

We made Controur with data in mind. It is flexible so we can make all kinds of different graphs and charts, using data from many different sources and formats.

Extensible

While many common visualizations are part of the core Contour offering, it’s easy to extend if you want to add your own customizations.

Stock Market Investment Planner made with Forio Contour
Check it out

Contour supports the following browsers:
  • Chrome
  • Firefox
  • Internet Explorer 9, 10, 11
  • Safari