charts icon

Charts

JSS Charts is a premium JSS extension that allows you to create interactive and dynamic charts based on the data available in your online spreadsheets. This plugin seamlessly integrates JSS with the ChartJS engine, directly delivering visually stunning and rich charts to your applications.

Documentation

Initial Setting

SettingsDescription
width?: Number Floating chart width. Default 400px
height?: Number Floating chart height. Default 300px
top?: Number Floating chart relative top position. Default 0px
left?: Number Floating chart relative left position. Default 0px
zIndex?: Number Floating chart zIndex. Default 3
chart?: ChartJS Object Define the ChartJS object. For more information on this, please consult the official ChartJS page.

Installation

Please choose one of the following options

Using NPM

npm install @jspreadsheet/charts

Using a CDN

<script src="https://cdn.jsdelivr.net/npm/@jspreadsheet/charts/dist/index.min.js"></script>

Examples

Data grid charts

Create a new data grid with some basic charts.




JavaScript example

<html>
<script src="https://jspreadsheet.com/v10/jspreadsheet.js"></script>
<link rel="stylesheet" href="https://jspreadsheet.com/v10/jspreadsheet.css" type="text/css" />
<script src="https://jsuites.net/v5/jsuites.js"></script>
<link rel="stylesheet" href="https://jsuites.net/v5/jsuites.css" type="text/css" />
<link rel="stylesheet" href="https://jsuites.net/v5/jsuites.layout.css" type="text/css" />

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Material+Icons" />

<script src="https://cdn.jsdelivr.net/npm/lemonadejs/dist/lemonade.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js/dist/chart.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@jspreadsheet/formula-pro/dist/index.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@jspreadsheet/charts/dist/index.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@jspreadsheet/charts/dist/style.min.css" type="text/css" />

<div id="spreadsheet"></div>

<script>
// Set your JSS license key (The following key only works for one day)
jspreadsheet.setLicense('YTVkZDhmYTc5YzYwNGU5MTI1ODA1MDFjZDE3ZGM0ODMzMDdmYTMyMjkzYTQ2NDY2Zjc5YTQ1MTk1NDdjM2I0MWFhNzE2M2JhNmQ0ZDkxNTA4NmU0YWEzYTFiNGUwODk0OGFmYWJjOGQ3ZjMyMDYyOGViMDk5ZTUxZmM4YmVmMGEsZXlKdVlXMWxJam9pU25Od2NtVmhaSE5vWldWMElpd2laR0YwWlNJNk1UWTROVGczTlRVM05Td2laRzl0WVdsdUlqcGJJbXB6Y0hKbFlXUnphR1ZsZEM1amIyMGlMQ0pqYjJSbGMyRnVaR0p2ZUM1cGJ5SXNJbXB6YUdWc2JDNXVaWFFpTENKamMySXVZWEJ3SWl3aWQyVmlJaXdpYkc5allXeG9iM04wSWwwc0luQnNZVzRpT2lJek5DSXNJbk5qYjNCbElqcGJJblkzSWl3aWRqZ2lMQ0oyT1NJc0luWXhNQ0lzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owSWl3aVltRnlJaXdpZG1Gc2FXUmhkR2x2Ym5NaUxDSnpaV0Z5WTJnaUxDSndjbWx1ZENJc0luTm9aV1YwY3lKZExDSmtaVzF2SWpwMGNuVmxmUT09');

// Set the extensions
jspreadsheet.setExtensions({ formula, charts });

// Create the spreadsheet
jspreadsheet(document.getElementById('spreadsheet'), {
    toolbar: true,
    worksheets: [{
        minDimensions: [8,8],
        data: [
            ['Test','',''],
            ['Jan','400','234'],
            ['Fev','300','431'],
            ['Mar','200','134'],
            ['Apr','321','513'],
        ],
        cells: {
            B1: {
                type:'chart',
                chart: {
                    type: 'bar',
                    data: {
                        labels: 'get(A2:A5)',
                        datasets: [{
                            label: 'get(A1)',
                            backgroundColor: ['#C1D37F'],
                            borderColor: '#000',
                            data: 'get(B2:B5)',
                        }]
                    },
                },
                left: 500,
                top: 60,
                zIndex: 4,
            },
            C1: {
                type:'chart',
                chart: {
                    type: 'line',
                    data: {
                        labels: 'get(A2:A5)',
                        datasets: [{
                            label: 'get(A1)',
                            backgroundColor: ['#000'],
                            borderColor: '#000',
                            data: 'get(C2:C5)',
                        }]
                    },
                },
                left: 480,
                top: 40,
            }
        }
    }],
});
</script>
</html>

React example

import React, { useRef } from "react";
import { Spreadsheet, Worksheet } from "@jspreadsheet/react";
import charts from "@jspreadsheet/charts";
import formula from "@jspreadsheet/formula";

import "/node_modules/@jsuites/css/dist/style.css";
import "/node_modules/@jspreadsheet/charts/dist/style.css";

// Add license
const license = 'YTVkZDhmYTc5YzYwNGU5MTI1ODA1MDFjZDE3ZGM0ODMzMDdmYTMyMjkzYTQ2NDY2Zjc5YTQ1MTk1NDdjM2I0MWFhNzE2M2JhNmQ0ZDkxNTA4NmU0YWEzYTFiNGUwODk0OGFmYWJjOGQ3ZjMyMDYyOGViMDk5ZTUxZmM4YmVmMGEsZXlKdVlXMWxJam9pU25Od2NtVmhaSE5vWldWMElpd2laR0YwWlNJNk1UWTROVGczTlRVM05Td2laRzl0WVdsdUlqcGJJbXB6Y0hKbFlXUnphR1ZsZEM1amIyMGlMQ0pqYjJSbGMyRnVaR0p2ZUM1cGJ5SXNJbXB6YUdWc2JDNXVaWFFpTENKamMySXVZWEJ3SWl3aWQyVmlJaXdpYkc5allXeG9iM04wSWwwc0luQnNZVzRpT2lJek5DSXNJbk5qYjNCbElqcGJJblkzSWl3aWRqZ2lMQ0oyT1NJc0luWXhNQ0lzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owSWl3aVltRnlJaXdpZG1Gc2FXUmhkR2x2Ym5NaUxDSnpaV0Z5WTJnaUxDSndjbWx1ZENJc0luTm9aV1YwY3lKZExDSmtaVzF2SWpwMGNuVmxmUT09';

// Define the data grid extensions
const extensions = { formula, charts };

export default function App() {
    // Spreadsheet array of worksheets
    const spreadsheet = useRef();

    // Data
    const data = [
        ['Test','',''],
        ['Jan','400','234'],
        ['Fev','300','431'],
        ['Mar','200','134'],
        ['Apr','321','513'],
    ];

    // Cell definitions
    const cells = {
        B1: {
            type:'chart',
            chart: {
                type: 'bar',
                data: {
                    labels: 'get(A2:A5)',
                    datasets: [{
                        label: 'get(A1)',
                        backgroundColor: ['#C1D37F'],
                        borderColor: '#000',
                        data: 'get(B2:B5)',
                    }]
                },
            },
            left: 500,
            top: 60,
            zIndex: 4,
        },
        C1: {
            type:'chart',
            chart: {
                type: 'line',
                data: {
                    labels: 'get(A2:A5)',
                    datasets: [{
                        label: 'get(A1)',
                        backgroundColor: ['#000'],
                        borderColor: '#000',
                        data: 'get(C2:C5)',
                    }]
                },
            },
            left: 480,
            top: 40,
        }
    }

    // Render component
    return (
        <Spreadsheet ref={spreadsheet} license={license} extensions={extensions} toolbar>
            <Worksheet data={data} cells={cells} />
        </Spreadsheet>
    );
}

Vue example

<template>
    <Spreadsheet ref="spreadsheet" :license="license" :extensions="extensions" toolbars>
        <Worksheet :data="data" :cells="cells" :minDimensions="[10,10]" />
    </Spreadsheet>
</template>

<script>
import { Spreadsheet, Worksheet } from "@jspreadsheet/vue";
import charts from "@jspreadsheet/charts";
import formula from "@jspreadsheet/formula";

import "/node_modules/@jsuites/css/dist/style.css";
import "/node_modules/@jspreadsheet/charts/dist/style.css";

// Data grid license
const license = 'YTVkZDhmYTc5YzYwNGU5MTI1ODA1MDFjZDE3ZGM0ODMzMDdmYTMyMjkzYTQ2NDY2Zjc5YTQ1MTk1NDdjM2I0MWFhNzE2M2JhNmQ0ZDkxNTA4NmU0YWEzYTFiNGUwODk0OGFmYWJjOGQ3ZjMyMDYyOGViMDk5ZTUxZmM4YmVmMGEsZXlKdVlXMWxJam9pU25Od2NtVmhaSE5vWldWMElpd2laR0YwWlNJNk1UWTROVGczTlRVM05Td2laRzl0WVdsdUlqcGJJbXB6Y0hKbFlXUnphR1ZsZEM1amIyMGlMQ0pqYjJSbGMyRnVaR0p2ZUM1cGJ5SXNJbXB6YUdWc2JDNXVaWFFpTENKamMySXVZWEJ3SWl3aWQyVmlJaXdpYkc5allXeG9iM04wSWwwc0luQnNZVzRpT2lJek5DSXNJbk5qYjNCbElqcGJJblkzSWl3aWRqZ2lMQ0oyT1NJc0luWXhNQ0lzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owSWl3aVltRnlJaXdpZG1Gc2FXUmhkR2x2Ym5NaUxDSnpaV0Z5WTJnaUxDSndjbWx1ZENJc0luTm9aV1YwY3lKZExDSmtaVzF2SWpwMGNuVmxmUT09';

// Define the data grid extensions
const extensions = { formula, charts };

export default {
    components: {
        Spreadsheet,
        Worksheet,
    },
    data() {
        // Data
        const data = [
            ['Test','',''],
            ['Jan','400','234'],
            ['Fev','300','431'],
            ['Mar','200','134'],
            ['Apr','321','513'],
        ];

        // Cell definitions
        const cells = {
            B1: {
                type:'chart',
                chart: {
                    type: 'bar',
                    data: {
                        labels: 'get(A2:A5)',
                        datasets: [{
                            label: 'get(A1)',
                            backgroundColor: ['#C1D37F'],
                            borderColor: '#000',
                            data: 'get(B2:B5)',
                        }]
                    },
                },
                left: 500,
                top: 60,
                zIndex: 4,
            },
            C1: {
                type:'chart',
                chart: {
                    type: 'line',
                    data: {
                        labels: 'get(A2:A5)',
                        datasets: [{
                            label: 'get(A1)',
                            backgroundColor: ['#000'],
                            borderColor: '#000',
                            data: 'get(C2:C5)',
                        }]
                    },
                },
                left: 480,
                top: 40,
            }
        }

        return {
            data,
            cells,
            license,
            extensions
        };
    }
}
</script>

Angular example

import { Component, ViewChild, ElementRef } from "@angular/core";
import * as jspreadsheet from "jspreadsheet";
import charts from "@jspreadsheet/charts";
import formula from "@jspreadsheet/formula";

import "/node_modules/jsuites/dist/jsuites.css";
import "/node_modules/jspreadsheet/dist/jspreadsheet.css";
import "/node_modules/@jsuites/css/dist/style.css";
import "/node_modules/@jspreadsheet/charts/dist/style.css";

const license = 'YTVkZDhmYTc5YzYwNGU5MTI1ODA1MDFjZDE3ZGM0ODMzMDdmYTMyMjkzYTQ2NDY2Zjc5YTQ1MTk1NDdjM2I0MWFhNzE2M2JhNmQ0ZDkxNTA4NmU0YWEzYTFiNGUwODk0OGFmYWJjOGQ3ZjMyMDYyOGViMDk5ZTUxZmM4YmVmMGEsZXlKdVlXMWxJam9pU25Od2NtVmhaSE5vWldWMElpd2laR0YwWlNJNk1UWTROVGczTlRVM05Td2laRzl0WVdsdUlqcGJJbXB6Y0hKbFlXUnphR1ZsZEM1amIyMGlMQ0pqYjJSbGMyRnVaR0p2ZUM1cGJ5SXNJbXB6YUdWc2JDNXVaWFFpTENKamMySXVZWEJ3SWl3aWQyVmlJaXdpYkc5allXeG9iM04wSWwwc0luQnNZVzRpT2lJek5DSXNJbk5qYjNCbElqcGJJblkzSWl3aWRqZ2lMQ0oyT1NJc0luWXhNQ0lzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owSWl3aVltRnlJaXdpZG1Gc2FXUmhkR2x2Ym5NaUxDSnpaV0Z5WTJnaUxDSndjbWx1ZENJc0luTm9aV1YwY3lKZExDSmtaVzF2SWpwMGNuVmxmUT09';

// Set your JSS license key (The following key only works for one day)
jspreadsheet.setLicense(license);

// Extensions
jspreadsheet.setExtensions({ charts, formula });

@Component({
  selector: "app-root",
  template: `<div #spreadsheet></div>`
})
export class AppComponent {
    @ViewChild("spreadsheet") spreadsheet: ElementRef;
    // Worksheets
    worksheets: jspreadsheet.worksheetInstance[];
    // Create a new data grid
    ngAfterViewInit() {
        // Create spreadsheet
        this.worksheets = jspreadsheet(this.spreadsheet.nativeElement, {
            toolbar: true,
            worksheets: [{
                minDimensions: [8,8],
                data: [
                    ['Test','',''],
                    ['Jan','400','234'],
                    ['Fev','300','431'],
                    ['Mar','200','134'],
                    ['Apr','321','513'],
                ],
                cells: {
                    B1: {
                        type:'chart',
                        chart: {
                            type: 'bar',
                            data: {
                                labels: 'get(A2:A5)',
                                datasets: [{
                                    label: 'get(A1)',
                                    backgroundColor: ['#C1D37F'],
                                    borderColor: '#000',
                                    data: 'get(B2:B5)',
                                }]
                            },
                        },
                        left: 500,
                        top: 60,
                        zIndex: 4,
                    },
                    C1: {
                        type:'chart',
                        chart: {
                            type: 'line',
                            data: {
                                labels: 'get(A2:A5)',
                                datasets: [{
                                    label: 'get(A1)',
                                    backgroundColor: ['#000'],
                                    borderColor: '#000',
                                    data: 'get(C2:C5)',
                                }]
                            },
                        },
                        left: 480,
                        top: 40,
                    }
                }
            }],
        });
    }
}