View the Project on GitHub youknowriad/report.js

Complex Example

Graph Line Example

Graph Bar Example

Graph Radar Example

Graph Pie Example

Graph Doughnut Example

Graph Polar Area Example


Build Status

Why another library ?

Read this blog post to know more about Report.js.


Report.js depend on jQuery and Chart.js. Don't forget to add them to your page.

You may want to include the css delivered in the library to add some styles for the charts legend.


Report.js is written in EcmapScript 6, so you can use it in ES6 like this.

import {Renderer} from 'reportjs';

let renderer = new Renderer(),
    options = {
        data: {
            dimensions: [{ id: 'Measures'}, { id: 'Year' }],
            dimensionValues: [
                [{ id: 'count', caption: 'My Count' }, { id: 'sum', caption: 'My Sum' }],
                [{ id: '2013' }, { id: '2014' }]
            cells: [
                {value: 10, dimensionValues: [0, 0]},
                {value: 20, dimensionValues: [1, 1]},
                {value: 15, dimensionValues: [0, 1]}
        layout: {
            type: 'table',
            rows: ['Measures'],
            columns: ['Measures', 'Category']

renderer.renderTo($('#mydiv'), options);

If you're using ES5 (current javascript supported by all the browsers), include the library. the library is loaded in the global variable "reportjs". See the complex example for more details.

The above example will output

2013 2014
My Count 10
My Sum 15 20

For a brower example without ES6, check the demo


Install the dependencies

git clone && cd report.js
npm install
bower install


npm test