Charts

New Version is Available

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

Settings	Description
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.

<html>
<script src="https://jspreadsheet.com/v11/jspreadsheet.js"></script>
<link rel="stylesheet" href="https://jspreadsheet.com/v11/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@3.9.0/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('MjBiZmY4OTU2N2I4MzA5M2Q2NDJiZjI3Zjk0MjNiMGIxMzU0NjVmY2Y2YjliMGYwZDNkNWY2NTdmNWFmOTQ4ZGFmMzM2NmM4Y2M2ZjQ3YzI3MTY3MmZjMDNlMTc5YTFlZjJmOTUxMmMzNmViYmNmYWE3MDE4MzhiYjI1ZGQ5ZmEsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpNME9EUTJOalkzTENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0ozWldJaUxDSnNiMk5oYkdodmMzUWlYU3dpY0d4aGJpSTZJak0wSWl3aWMyTnZjR1VpT2xzaWRqY2lMQ0oyT0NJc0luWTVJaXdpZGpFd0lpd2lkakV4SWl3aVkyaGhjblJ6SWl3aVptOXliWE1pTENKbWIzSnRkV3hoSWl3aWNHRnljMlZ5SWl3aWNtVnVaR1Z5SWl3aVkyOXRiV1Z1ZEhNaUxDSnBiWEJ2Y25SbGNpSXNJbUpoY2lJc0luWmhiR2xrWVhScGIyNXpJaXdpYzJWaGNtTm9JaXdpY0hKcGJuUWlMQ0p6YUdWbGRITWlMQ0pqYkdsbGJuUWlMQ0p6WlhKMlpYSWlMQ0p6YUdGd1pYTWlYU3dpWkdWdGJ5STZkSEoxWlgwPQ==');

// 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>

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

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

// Add license
const license = 'MjBiZmY4OTU2N2I4MzA5M2Q2NDJiZjI3Zjk0MjNiMGIxMzU0NjVmY2Y2YjliMGYwZDNkNWY2NTdmNWFmOTQ4ZGFmMzM2NmM4Y2M2ZjQ3YzI3MTY3MmZjMDNlMTc5YTFlZjJmOTUxMmMzNmViYmNmYWE3MDE4MzhiYjI1ZGQ5ZmEsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpNME9EUTJOalkzTENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0ozWldJaUxDSnNiMk5oYkdodmMzUWlYU3dpY0d4aGJpSTZJak0wSWl3aWMyTnZjR1VpT2xzaWRqY2lMQ0oyT0NJc0luWTVJaXdpZGpFd0lpd2lkakV4SWl3aVkyaGhjblJ6SWl3aVptOXliWE1pTENKbWIzSnRkV3hoSWl3aWNHRnljMlZ5SWl3aWNtVnVaR1Z5SWl3aVkyOXRiV1Z1ZEhNaUxDSnBiWEJ2Y25SbGNpSXNJbUpoY2lJc0luWmhiR2xrWVhScGIyNXpJaXdpYzJWaGNtTm9JaXdpY0hKcGJuUWlMQ0p6YUdWbGRITWlMQ0pqYkdsbGJuUWlMQ0p6WlhKMlpYSWlMQ0p6YUdGd1pYTWlYU3dpWkdWdGJ5STZkSEoxWlgwPQ==';

// 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>
    );
}

<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 "@jsuites/css/dist/style.css";
import "@jspreadsheet/charts/dist/style.css";

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

// 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>

import { Component, ViewChild, ElementRef } from "@angular/core";
import jspreadsheet from "jspreadsheet";

import "jspreadsheet/dist/jspreadsheet.css"
import "jsuites/dist/jsuites.css"
import charts from "@jspreadsheet/charts";
import formula from "@jspreadsheet/formula";

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

const license = 'MjBiZmY4OTU2N2I4MzA5M2Q2NDJiZjI3Zjk0MjNiMGIxMzU0NjVmY2Y2YjliMGYwZDNkNWY2NTdmNWFmOTQ4ZGFmMzM2NmM4Y2M2ZjQ3YzI3MTY3MmZjMDNlMTc5YTFlZjJmOTUxMmMzNmViYmNmYWE3MDE4MzhiYjI1ZGQ5ZmEsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpNME9EUTJOalkzTENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0ozWldJaUxDSnNiMk5oYkdodmMzUWlYU3dpY0d4aGJpSTZJak0wSWl3aWMyTnZjR1VpT2xzaWRqY2lMQ0oyT0NJc0luWTVJaXdpZGpFd0lpd2lkakV4SWl3aVkyaGhjblJ6SWl3aVptOXliWE1pTENKbWIzSnRkV3hoSWl3aWNHRnljMlZ5SWl3aWNtVnVaR1Z5SWl3aVkyOXRiV1Z1ZEhNaUxDSnBiWEJ2Y25SbGNpSXNJbUpoY2lJc0luWmhiR2xrWVhScGIyNXpJaXdpYzJWaGNtTm9JaXdpY0hKcGJuUWlMQ0p6YUdWbGRITWlMQ0pqYkdsbGJuUWlMQ0p6WlhKMlpYSWlMQ0p6YUdGd1pYTWlYU3dpWkdWdGJ5STZkSEoxWlgwPQ==';

// 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,
                    }
                }
            }],
        });
    }
}