Home Reference Source


In Greek mythology, Proteus is an early sea-god or god of rivers and oceanic bodies of water, one of several deities whom Homer calls the "Old Man of the Sea". Some who ascribe to him a specific domain call him the god of "elusive sea change", which suggests the constantly changing nature of the sea or the liquid quality of water in general. He can foretell the future, but, in a mytheme familiar to several cultures, will change his shape to avoid having to; he will answer only to someone who is capable of capturing the beast. From this feature of Proteus comes the adjective protean, with the general meaning of "versatile", "mutable", "capable of assuming many forms". "Protean" has positive connotations of flexibility, versatility and adaptability. - Wikipedia

Build Status Dependency Status codecov Codacy Badge Gitter



Before start developing this (awesome) library, we first analyzed hundreds of charting libraries out there. They are really good but almost all of them:

For these reasons we decided to develop a new web-based visualization library from scratch, by aiming to solve all the previously identified issues.


You can find a more detailed documentation in our Wiki and JSDoc

Simply add the proteic.js script to your project and include it in your HTML:

<script type="text/javascript" src="proteic.min.js"></script>

After including the script (preferably the minified version for production environments) you are ready to use ProteicJS.

As an example, here is how to create a simple Barchart with static data:

<script type="text/javascript" src="https://d3js.org/d3.v4.min.js"></script>
<script type="text/javascript" src="proteic.min.js"></script>

<!-- By default, Proteic.js places the chart into div#chart -->
<div style id='chart'></div>

<script type="text/javascript">
var data = [
  {x: 'SP', key: '- 18', y: 30},
  {x: 'SP', key: '+ 18 - 35', y: 25},
  {x: 'SP', key: '+ 35', y: 45},
  {x: 'FR', key: '- 18', y: 10},
  {x: 'FR', key: '+ 18 - 35', y: 50},
  {x: 'FR', key: '+ 35', y: 40}

var barchart = new proteic.Barchart(data);

Additionally, as a special feature of barcharts, they can transit from and to different states: grouped and stacked. To transit a barchart to a different state, you can use the following code:

barchart.fire('transition', 'grouped');


barchart.fire('transition', 'grouped');


Proteic.js has a unique but important dependency: D3.js. We are using the recently released version 4, which has not compatibility with previous versions. Yo can have a look into the changes here.


You can visit this site which is a build of the current project. We are still developing and constantly adding new features but you can already use our stable releases.


If you are interested in the project and you want to collaborate in your spare time, you can have a look into the contributing guide.


We provide the following NPM Scripts to ease the development process. You can run each script like the following npm run-script serve:watch


If you need more information about the ProteicJS API, you can visit our JSDocs site