Charts

New Version is Available

Charts is a premium extension that enables you to create interactive and dynamic charts based on data available in your spreadsheets. This plugin seamlessly integrates Jspreadsheet with the Chart.js engine, delivering visually stunning and rich charts directly 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 z-index. Default: 3
chart?: Chart.js Object	Defines the Chart.js object. For more information, consult the official Chart.js documentation.

Installation

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 data grid with basic charts.

<html>
<script src="https://jspreadsheet.com/v12/jspreadsheet.js"></script>
<link rel="stylesheet" href="https://jspreadsheet.com/v12/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/[email protected]/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('ZGM4MGY1NjQzODA1YWE1NDc5YmE4N2E3YzA3ODg4ZWQxMDcyYjRiOWZjNjk2MzJiNjcwMDA0NWE2OWI5OGIzZDIxYTExNzM5OWZmNWY4MzkyZTA0YmFmY2UzMzRlNzZhYWI3MWMxZDJjODEwMTcyNGZlNDIxZTEyYjdmZDIxNDIsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpVNU56azNNemd4TENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0p6ZEdGamEySnNhWFI2TG1sdklpd2lkMlZpWTI5dWRHRnBibVZ5TG1sdklpd2lkMlZpSWl3aWJHOWpZV3hvYjNOMElsMHNJbkJzWVc0aU9pSXpOQ0lzSW5OamIzQmxJanBiSW5ZM0lpd2lkamdpTENKMk9TSXNJbll4TUNJc0luWXhNU0lzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owWlhJaUxDSmlZWElpTENKMllXeHBaR0YwYVc5dWN5SXNJbk5sWVhKamFDSXNJbkJ5YVc1MElpd2ljMmhsWlhSeklpd2lZMnhwWlc1MElpd2ljMlZ5ZG1WeUlpd2ljMmhoY0dWeklpd2labTl5YldGMElsMHNJbVJsYlc4aU9uUnlkV1Y5');

// 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 = 'ZGM4MGY1NjQzODA1YWE1NDc5YmE4N2E3YzA3ODg4ZWQxMDcyYjRiOWZjNjk2MzJiNjcwMDA0NWE2OWI5OGIzZDIxYTExNzM5OWZmNWY4MzkyZTA0YmFmY2UzMzRlNzZhYWI3MWMxZDJjODEwMTcyNGZlNDIxZTEyYjdmZDIxNDIsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpVNU56azNNemd4TENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0p6ZEdGamEySnNhWFI2TG1sdklpd2lkMlZpWTI5dWRHRnBibVZ5TG1sdklpd2lkMlZpSWl3aWJHOWpZV3hvYjNOMElsMHNJbkJzWVc0aU9pSXpOQ0lzSW5OamIzQmxJanBiSW5ZM0lpd2lkamdpTENKMk9TSXNJbll4TUNJc0luWXhNU0lzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owWlhJaUxDSmlZWElpTENKMllXeHBaR0YwYVc5dWN5SXNJbk5sWVhKamFDSXNJbkJ5YVc1MElpd2ljMmhsWlhSeklpd2lZMnhwWlc1MElpd2ljMlZ5ZG1WeUlpd2ljMmhoY0dWeklpd2labTl5YldGMElsMHNJbVJsYlc4aU9uUnlkV1Y5';

// 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={true}>
            <Worksheet data={data} cells={cells} />
        </Spreadsheet>
    );
}

<template>
    <Spreadsheet ref="spreadsheet" :license="license" :extensions="extensions" :toolbar="true">
        <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 = 'ZGM4MGY1NjQzODA1YWE1NDc5YmE4N2E3YzA3ODg4ZWQxMDcyYjRiOWZjNjk2MzJiNjcwMDA0NWE2OWI5OGIzZDIxYTExNzM5OWZmNWY4MzkyZTA0YmFmY2UzMzRlNzZhYWI3MWMxZDJjODEwMTcyNGZlNDIxZTEyYjdmZDIxNDIsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpVNU56azNNemd4TENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0p6ZEdGamEySnNhWFI2TG1sdklpd2lkMlZpWTI5dWRHRnBibVZ5TG1sdklpd2lkMlZpSWl3aWJHOWpZV3hvYjNOMElsMHNJbkJzWVc0aU9pSXpOQ0lzSW5OamIzQmxJanBiSW5ZM0lpd2lkamdpTENKMk9TSXNJbll4TUNJc0luWXhNU0lzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owWlhJaUxDSmlZWElpTENKMllXeHBaR0YwYVc5dWN5SXNJbk5sWVhKamFDSXNJbkJ5YVc1MElpd2ljMmhsWlhSeklpd2lZMnhwWlc1MElpd2ljMlZ5ZG1WeUlpd2ljMmhoY0dWeklpd2labTl5YldGMElsMHNJbVJsYlc4aU9uUnlkV1Y5';

// 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 "jsuites/dist/jsuites.css"
import "jspreadsheet/dist/jspreadsheet.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 = 'ZGM4MGY1NjQzODA1YWE1NDc5YmE4N2E3YzA3ODg4ZWQxMDcyYjRiOWZjNjk2MzJiNjcwMDA0NWE2OWI5OGIzZDIxYTExNzM5OWZmNWY4MzkyZTA0YmFmY2UzMzRlNzZhYWI3MWMxZDJjODEwMTcyNGZlNDIxZTEyYjdmZDIxNDIsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpVNU56azNNemd4TENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0p6ZEdGamEySnNhWFI2TG1sdklpd2lkMlZpWTI5dWRHRnBibVZ5TG1sdklpd2lkMlZpSWl3aWJHOWpZV3hvYjNOMElsMHNJbkJzWVc0aU9pSXpOQ0lzSW5OamIzQmxJanBiSW5ZM0lpd2lkamdpTENKMk9TSXNJbll4TUNJc0luWXhNU0lzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owWlhJaUxDSmlZWElpTENKMllXeHBaR0YwYVc5dWN5SXNJbk5sWVhKamFDSXNJbkJ5YVc1MElpd2ljMmhsWlhSeklpd2lZMnhwWlc1MElpd2ljMlZ5ZG1WeUlpd2ljMmhoY0dWeklpd2labTl5YldGMElsMHNJbVJsYlc4aU9uUnlkV1Y5';

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

Edit this page on GitHub