Products

Charts

JSS charts is a premium JSS extension to create interactive and dynamic charts based on any data available in your online spreadsheets. The plugin integrates JSS with the ChartJS engine and delivers amazing rich charts directly to your applications.

Author

Jspreadsheet Pro Team.

License

Available on the premium or enterprise plan.

Configuration

The following options are available to customize the plugin's behavior:

Method	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.

Example

Load the spreadsheet with some basic charts.

Source code

Using CDN

Using NPM

<html>
<script src="https://jspreadsheet.com/v9/jspreadsheet.js"></script>
<link rel="stylesheet" href="https://jspreadsheet.com/v9/jspreadsheet.css" type="text/css" />
<script src="https://jsuites.net/v4/jsuites.js"></script>
<link rel="stylesheet" href="https://jsuites.net/v4/jsuites.css" type="text/css" />
<link rel="stylesheet" href="https://jsuites.net/v4/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>
// License for Formula Plugin
jspreadsheet.setLicense('NjY5ZDg2YmRmZTE3NzVlNTY4ZmE2NGZjOTRhMWNhOWM0ZmU1NTg1MmQ1NzUzYWYyYmE4ZTgyODdmMDMzMmM2NDQ3NjFkNjgyODE1ZTkzOWRhODFjNjViM2ZmNjc4NmFlMjdjZDI0OWE5YzY3M2YzNWFkZGU0NTg2ZTI5MTdlZjMsZXlKdVlXMWxJam9pU25Od2NtVmhaSE5vWldWMElpd2laR0YwWlNJNk1UWTRNRGsxTVRFMU9Dd2laRzl0WVdsdUlqcGJJbXB6Y0hKbFlXUnphR1ZsZEM1amIyMGlMQ0pqYjJSbGMyRnVaR0p2ZUM1cGJ5SXNJbXB6YUdWc2JDNXVaWFFpTENKamMySXVZWEJ3SWl3aWJHOWpZV3hvYjNOMElsMHNJbkJzWVc0aU9pSXpJaXdpYzJOdmNHVWlPbHNpZGpjaUxDSjJPQ0lzSW5ZNUlpd2lZMmhoY25Seklpd2labTl5YlhNaUxDSm1iM0p0ZFd4aElpd2ljR0Z5YzJWeUlpd2ljbVZ1WkdWeUlpd2lZMjl0YldWdWRITWlMQ0pwYlhCdmNuUWlMQ0ppWVhJaUxDSjJZV3hwWkdGMGFXOXVjeUlzSW5ObFlYSmphQ0pkTENKa1pXMXZJanAwY25WbGZRPT0=');

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